Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

Variables

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

Usage

You can customize Clerk components by passing an object of variables to the variables property of the appearance prop. You can pass it to the <ClerkProvider> component to apply it to all Clerk components in your app or you can pass it to a single Clerk component.

Pass variables to <ClerkProvider>

To customize all Clerk components, pass the variables property to the appearance prop to the <ClerkProvider> component.

In the example below, 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.

/src/app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs'; export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <ClerkProvider appearance={{ variables: { colorPrimary: "red", colorText: "white" } }} > <html lang="en"> <body>{children}</body> </html> </ClerkProvider> ) }
_app.tsx
import { ClerkProvider } from '@clerk/nextjs'; import type { AppProps } from "next/app"; function MyApp({ Component, pageProps }: AppProps) { return ( <ClerkProvider appearance={{ variables: { colorPrimary: "red", colorText: "white" } }} > <Component {...pageProps}/> </ClerkProvider> ) } export default MyApp;

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 example below, the primary color is set to red and the text color is set to white for all instances of the <SignIn /> component.

/src/app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs'; export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <ClerkProvider appearance={{ signIn: { variables: { colorPrimary: "red", colorText: "white" } }, }} > <html lang="en"> <body>{children}</body> </html> </ClerkProvider> ) }
_app.tsx
import { ClerkProvider } from "@clerk/nextjs"; import type { AppProps } from "next/app"; function MyApp({ Component, pageProps }: AppProps) { return ( <ClerkProvider appearance={{ signIn: { variables: { colorPrimary: "red", colorText: "white" } }, }} > <Component {...pageProps} /> </ClerkProvider> ); } export default MyApp;

Pass variables to a single component

To customize a single Clerk component, pass the variables property to the appearance prop to the Clerk component.

/app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from "@clerk/nextjs"; export default function Page() { return <SignIn appearance={{ variables: { colorPrimary: "red", colorText: "white" } }} />; }
/pages/sign-in/[[...index]].tsx
import { SignIn } from "@clerk/nextjs"; const SignInPage = () => ( <SignIn appearance={{ variables: { colorPrimary: "red", colorText: "white" } }} /> ); export default SignInPage;

Properties

NameTypeDescription
colorPrimarystringThe primary color used throughout the components.
colorDangerstringThe color used for error states.
colorSuccessstringThe color used for success states.
colorWarningstringThe color used for warning states.
colorAlphaShadestringThe 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.
colorTextOnPrimaryBackgroundstringThe color used for text on the primary background.
colorTextSecondarystringThe color used for secondary text.
colorBackgroundstringThe background color for the card container.
colorInputTextstringThe color used for text in input fields.
colorInputBackgroundstringThe background color used for input fields.
fontFamilystringThe font family used throughout the components. By default, it is set to inherit.
fontFamilyButtonsstringThe font family used for buttons. By default, it is set to inherit.
fontSizestringThe 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}.
borderRadiusstringThe border radius used throughout the components. By default, this is set to 0.375rem.
spacingUnitstringThe spacing unit used throughout the components. By default, this is set to 1rem.

Last updated on December 15, 2023

What did you think of this content?

Clerk © 2024