Variables
prop
The variables
property is used to adjust the general styles of the component's base theme, like colors, backgrounds, and typography.
Properties
- Name
colorPrimary
- Type
string
- Description
The primary color used throughout the components.
- Name
colorDanger
- Type
string
- Description
The color used for error states.
- Name
colorSuccess
- Type
string
- Description
The color used for success states.
- Name
colorWarning
- Type
string
- Description
The color used for warning states.
- Name
colorNeutral
- Type
string
- Description
The color that will be used for all to generate the neutral shades the components use. This option applies to borders, backgrounds for hovered elements, hovered dropdown options.
- Name
colorText
- Type
string
- Description
The color used for text.
- Name
colorTextOnPrimaryBackground
- Type
string
- Description
The color used for text on the primary background.
- Name
colorTextSecondary
- Type
string
- Description
The color used for secondary text.
- Name
colorBackground
- Type
string
- Description
The background color for the card container.
- Name
colorInputText
- Type
string
- Description
The color used for text in input fields.
- Name
colorInputBackground
- Type
string
- Description
The background color used for input fields.
- Name
colorShimmer
- Type
string
- Description
The color of the avatar shimmer.
- Name
fontFamily
- Type
string
- Description
The font family used throughout the components. By default, it is set to
inherit
.
- Name
fontFamilyButtons
- Type
string
- Description
The font family used for buttons. By default, it is set to
inherit
.
- Name
fontSize
- Type
string
- Description
The font size used throughout the components. By default, this is set to
0.8125rem
.
- Name
fontWeight
- Type
{normal: number, medium: number, semibold: number, bold: number}
- Description
The font weight used throughout the components. By default, this is set to
{normal: 400, medium: 500, semibold: 600, bold: 700}
.
- Name
borderRadius
- Type
string
- Description
The border radius used throughout the components. By default, this is set to
0.375rem
.
- Name
spacingUnit
- Type
string
- Description
The spacing unit used throughout the components. By default, this is set to
1rem
.
Usage
You can customize Clerk components by passing an object of variables to the variables
property of the appearance
prop.
Apply variables
to all Clerk components
To customize all Clerk components, pass the variables
property to the appearance
prop of the <ClerkProvider>
component.
In the following example, the primary color is set to red and the text color is set to white. Because these styles are applied to the <ClerkProvider>
, which wraps the entire application, these styles will be applied to all Clerk components that use the primary color and text color.
Apply variables
to all instances of a Clerk component
You can customize all instances of a Clerk component by passing the component to the appearance
prop of the <ClerkProvider>
. The appearance
prop accepts the name of the Clerk component you want to style as a key.
In the following example, the primary color is set to red and the text color is set to white for all instances of the <SignIn />
component.
Apply variables
to a single Clerk component
To customize a single Clerk component, pass the variables
property to the appearance
prop of the Clerk component.
The following example shows how to customize the <SignIn />
component by setting the primary color to red and the text color to white.
Feedback
Last updated on