Global component styling
Set consistent branding and styling across all Clerk UI in an application.
Clerk · Pipe
appearance
The appearance prop customizes the look of Clerk components. Apply it globally at the Clerk integration or locally to an individual component.
How it works
The appearance prop is Clerk's styling configuration for its prebuilt components. Put it on the provider or integration for shared styling, or pass it directly to an individual component; nested components opened by another component require appearance in that component's dedicated props object.
Syntax
<ClerkProvider appearance={{ theme: dark }} />Parameters
| Name | Type | Description |
|---|---|---|
appearance | object | Clerk appearance configuration, including shared or component-specific styling options such as theme. |
Returns
Styles the targeted Clerk component or components; it does not return a value.
Key points
- Use appearance globally when several Clerk components should share styling, or locally when only one component needs customization.
- Configure global appearance at the SDK integration point rather than repeating the same configuration on every component.
- In most SDK integrations, ClerkProvider is the usual place for application-wide appearance settings.
Common mistakes
- A parent component's appearance settings do not automatically style a component it opens; configure the opened component through its dedicated props object.
Example: Apply a global theme
<ClerkProvider appearance={{ theme: dark }}>
<App />
</ClerkProvider>Applies the imported dark theme to all Clerk components initialized beneath the provider.
When to use it
Per-component customization
Give one sign-in, user-profile, or other Clerk component its own visual configuration.
Nested component styling
Configure a component launched by another Clerk component.
Interview questions
QWhere can the appearance prop be applied?
Use appearance on ClerkProvider for shared styling across the application, or on an individual Clerk component for local styling. The configuration can include themes and other customization options.
Follow-up: How would you style a component opened by another component? Pass appearance through the dedicated props object for the opened component, because the parent's top-level appearance applies only to itself.
QHow do you use appearance to apply a theme?
The appearance prop accepts a theme configuration. A theme can be applied globally through ClerkProvider or locally on a component, depending on the desired scope.
Follow-up: How can one component instance use a different theme? Supply a component-specific appearance configuration rather than changing the global provider configuration.
QHow do global and component-level appearance customization differ?
Global appearance is configured wherever the Clerk integration is initialized; for most SDKs this is ClerkProvider. Individual components can also receive appearance directly.
Follow-up: What limitation applies when a component opens another component? The opener's appearance does not carry over, so pass the configuration through the opened component's dedicated props object.
Related
ClerkProviderthemelocalizationelementsvariables