Appearance prop
Customizing the appearance of Browser components is a powerful way to make your application look and feel unique. Browser 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 Browser components. When using it for global styling, the prop is available wherever you initialize the Browser integration. For most SDKs, this means applying it to the <ClerkProvider> component, while in others, it's configured through the SDK's Browser 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
options?- Type
Options- Description
Configuration options that affect the layout of the components, allowing customizations that are hard to implement with just CSS. For more information, see Options.
- 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 Browser 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 Browser component styles. This is useful for advanced CSS customization, allowing you to control the cascade and prevent style conflicts by isolating Browser's styles within a specific layer. For more information on CSS layers, see the MDN documentation on @layer.
Using a prebuilt theme
Browser offers a set of prebuilt themes that can be used to quickly style Browser components. See the Themes docs for more information.
Customize the layout
The options 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 Options 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 Browser component
The elements property lets you apply custom styles to the underlying DOM elements of Browser'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 Browser components further:
Localization
Learn how to localize your Browser components.
Customize layouts
Learn how to change the layout and links of your <SignIn /> and <SignUp /> components.
Feedback
Last updated on