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 inherited.
`fontFamilyButtons`	`string`	The font family used for buttons. By default, it is inherited.
`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.