Appearance prop
Customizing the appearance of Clerk components is a powerful way to make your application look and feel unique. Clerk provides a way to customize the appearance of its components using the appearance prop.
The appearance prop can be used to share styles across every component, or applied individually to any of the Clerk components. When using it for global styling, the prop is available wherever you initialize the Clerk integration. For most SDKs, this means applying it to the <ClerkProvider> component, while in others, it's configured through the SDK's Clerk integration or plugin.
This applies to all of the React-based packages, like Next.js, as well as the pure JavaScript ClerkJS package.
Properties
The appearance prop accepts the following properties:
- Name
theme?- Type
BaseTheme | BaseTheme[]- Description
A theme used as the base theme for the components. For more information, see Themes.
- Name
layout?- Type
Layout- Description
Configuration options that affect the layout of the components, allowing customizations that are hard to implement with just CSS. For more information, see Layout.
- Name
variables?- Type
Variables- Description
General theme overrides. This styles will be merged with our base theme. Can override global styles like colors, fonts, etc. For more information, see Variables.
- Name
elements?- Type
Elements- Description
Fine-grained theme overrides. Useful when you want to style specific elements or elements that are under a specific state. For more information, see the Customize elements of a Clerk component section.
- Name
captcha?- Type
Captcha- Description
Configuration options that affect the appearance of the CAPTCHA widget. For more information, see the dedicated guide.
- Name
cssLayerName?- Type
string- Description
The name of the CSS layer for Clerk component styles. This is useful for advanced CSS customization, allowing you to control the cascade and prevent style conflicts by isolating Clerk's styles within a specific layer. For more information on CSS layers, see the MDN documentation on @layer.
Using a prebuilt theme
Clerk offers a set of prebuilt themes that can be used to quickly style Clerk components. See the Themes docs for more information.
Customize the layout
The layout property is used to adjust the layout of the <SignIn/> and <SignUp/> components, as well as set important links to your support, terms, and privacy pages. See the Layout docs for more information.
Customize the base theme
The variables property is used to adjust the general styles of a component's base theme, like colors, backgrounds, and typography. See the Variables docs for more information.
Customize elements of a Clerk component
The elements property lets you apply custom styles to the underlying DOM elements of Clerk's prebuilt components. See the Bring your own CSS docs for more information.
Next steps
Here are a few resources you can utilize to customize your Clerk components further:
Localization
Learn how to localize your Clerk components.
Customize layouts
Learn how to change the layout and links of your Clerk components.
Feedback
Last updated on