Variables

The variables property is used to adjust the general styles of the component's base theme, like colors, backgrounds, typography.

Usage

app.tsx
import { ClerkProvider } from '@clerk/nextjs';
 
<ClerkProvider appearance={{
    variables: {
        colorPrimary: "red",
        colorText: "white"
    }
}}>
  {/* ... */}
</ClerkProvider>

Properties

Name	Type	Description
`colorPrimary`	`string`	The primary color used throughout the components.
`colorDanger`	`string`	The color used for error states.
`colorSuccess`	`string`	The color used for success states.
`colorWarning`	`string`	The color used for warning states.
`colorAlphaShade`	`string`	The color that will be used for all to generate the alpha shades the components use. This option applies to borders, backgrounds for hovered elements, hovered dropdown options.
`colorTextOnPrimaryBackground`	`string`	The color used for text on the primary background.
`colorTextSecondary`	`string`	The color used for secondary text.
`colorBackground`	`string`	The background color for the card container.
`colorInputText`	`string`	The color used for text in input fields.
`colorInputBackground`	`string`	The background color used for input fields.
`fontFamily`	`string`	The font family used throughout the components. By default, it is set to `inherit`.
`fontFamilyButtons`	`string`	The font family used for buttons. By default, it is set to `inherit`.
`fontSize`	`string`	The font size used throughout the components. By default, this is set to `1rem`.
`fontSmoothing`	`'auto' \| 'antialiased' \| 'never'`	The font smoothing used throughout the components. By default, this is set to `auto`.
`fontWeight`	`{normal: number, medium: number, bold: number}`	The font weight used throughout the components. By default, this is set to `{normal: 400, medium: 500, bold: 600}`.
`borderRadius`	`string`	The border radius used throughout the components. By default, this is set to `0.375rem`.
`spacingUnit`	`string`	The spacing unit used throughout the components. By default, this is set to 1rem.