`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.

Note

Browser Compatibility Considerations

Clerk's theming system uses modern CSS features like color-mix() and relative color syntax to automatically generate color variations from your base colors. These features require:

color-mix(): Chrome 111+, Firefox 113+, Safari 16.2+
Relative color syntax: Chrome 119+, Firefox 120+, Safari 16.4+

For broader browser support, when using the variables prop, use direct color values (e.g. colorPrimary: '#6c47ff') instead of CSS variables or modern color functions.

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 blue and the text color is set to black. 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.

Next.js

React

Remix

Astro

Vue

Nuxt

App Router

Pages Router

/src/app/layout.tsx

import { ClerkProvider } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider
      appearance={{
        variables: {
          colorPrimary: '#0000ff', // blue
          colorText: '#000000', // black
        },
      }}
    >
      <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: '#0000ff', // blue
          colorText: '#000000', // black
        },
      }}
    >
      <Component {...pageProps} />
    </ClerkProvider>
  )
}

export default MyApp

app.tsx

import React from 'react'
import './App.css'
import { ClerkProvider } from '@clerk/clerk-react'

if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}
const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY

function App() {
  return (
    <ClerkProvider
      appearance={{
        variables: {
          colorPrimary: '#0000ff', // blue
          colorText: '#000000', // black
        },
      }}
      publishableKey={clerkPubKey}
    >
      <div>Hello from clerk</div>
    </ClerkProvider>
  )
}

export default App

app/root.tsx

// Import ClerkApp
import { ClerkApp } from '@clerk/remix'
import type { MetaFunction, LoaderFunction } from '@remix-run/node'

import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'

import { rootAuthLoader } from '@clerk/remix/ssr.server'

export const meta: MetaFunction = () => ({
  charset: 'utf-8',
  title: 'New Remix App',
  viewport: 'width=device-width,initial-scale=1',
})

export const loader: LoaderFunction = (args) => rootAuthLoader(args)

function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}

export default ClerkApp(App, {
  appearance: {
    variables: {
      colorPrimary: '#0000ff', // blue
      colorText: '#000000', // black
    },
  },
})

astro.config.mjs

import clerk from '@clerk/astro'

export default defineConfig({
  integrations: [
    clerk({
      appearance: {
        variables: {
          colorPrimary: '#0000ff', // blue
          colorText: '#000000', // black
        },
      },
    }),
  ],
})

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { clerkPlugin } from '@clerk/vue'

const app = createApp(App)
app.use(clerkPlugin, {
  appearance: {
    variables: {
      colorPrimary: '#0000ff', // blue
      colorText: '#000000', // black
    },
  },
})
app.mount('#app')

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@clerk/nuxt'],
  clerk: {
    appearance: {
      variables: {
        colorPrimary: '#0000ff', // blue
        colorText: '#000000', // black
      },
    },
  },
})

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 blue and the text color is set to black for all instances of the <SignIn /> component.

Next.js

React

Remix

Astro

Vue

Nuxt

App Router

Pages Router

/src/app/layout.tsx

import { ClerkProvider } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider
      appearance={{
        signIn: {
          variables: {
            colorPrimary: '#0000ff', // blue
            colorText: '#000000', // black
          },
        },
      }}
    >
      <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: '#0000ff', // blue
            colorText: '#000000', // black
          },
        },
      }}
    >
      <Component {...pageProps} />
    </ClerkProvider>
  )
}

export default MyApp

app.tsx

import React from 'react'
import './App.css'
import { ClerkProvider } from '@clerk/clerk-react'

if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}
const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY

function App() {
  return (
    <ClerkProvider
      appearance={{
        signIn: {
          variables: {
            colorPrimary: '#0000ff', // blue
            colorText: '#000000', // black
          },
        },
      }}
      publishableKey={clerkPubKey}
    >
      <div>Hello from clerk</div>
    </ClerkProvider>
  )
}

export default App

app/root.tsx

// Import ClerkApp
import { ClerkApp } from '@clerk/remix'
import type { MetaFunction, LoaderFunction } from '@remix-run/node'

import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'

import { rootAuthLoader } from '@clerk/remix/ssr.server'

export const meta: MetaFunction = () => ({
  charset: 'utf-8',
  title: 'New Remix App',
  viewport: 'width=device-width,initial-scale=1',
})

export const loader: LoaderFunction = (args) => rootAuthLoader(args)

function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}

export default ClerkApp(App, {
  appearance: {
    signIn: {
      variables: {
        colorPrimary: '#0000ff', // blue
        colorText: '#000000', // black
      },
    },
  },
})

astro.config.mjs

import clerk from '@clerk/astro'

export default defineConfig({
  integrations: [
    clerk({
      appearance: {
        signIn: {
          variables: {
            colorPrimary: '#0000ff', // blue
            colorText: '#000000', // black
          },
        },
      },
    }),
  ],
})

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { clerkPlugin } from '@clerk/vue'

const app = createApp(App)
app.use(clerkPlugin, {
  appearance: {
    signIn: {
      variables: {
        colorPrimary: '#0000ff', // blue
        colorText: '#000000', // black
      },
    },
  },
})
app.mount('#app')

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@clerk/nuxt'],
  clerk: {
    appearance: {
      signIn: {
        variables: {
          colorPrimary: '#0000ff', // blue
          colorText: '#000000', // black
        },
      },
    },
  },
})

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 blue and the text color to black.

Next.js

React

Remix

Astro

Vue

Nuxt

App Router

Pages Router

app/sign-in/[[...sign-in]]/page.tsx

import { SignIn } from '@clerk/nextjs'

export default function Page() {
  return (
    <SignIn
      appearance={{
        variables: {
          colorPrimary: '#0000ff', // blue
          colorText: '#000000', // black
        },
      }}
    />
  )
}

/pages/sign-in/[[...index]].tsx

import { SignIn } from '@clerk/nextjs'

const SignInPage = () => (
  <SignIn
    appearance={{
      variables: {
        colorPrimary: '#0000ff', // blue
        colorText: '#000000', // black
      },
    }}
  />
)

export default SignInPage

/src/sign-in/[[...index]].tsx

import { SignIn } from '@clerk/clerk-react'

const SignInPage = () => (
  <SignIn
    appearance={{
      variables: {
        colorPrimary: '#0000ff', // blue
        colorText: '#000000', // black
      },
    }}
  />
)

export default SignInPage

app/routes/sign-in/$.tsx

import { SignIn } from '@clerk/remix'

export default function SignInPage() {
  return (
    <div style={{ border: '2px solid blue', padding: '2rem' }}>
      <h1>Sign In route</h1>
      <SignIn
        appearance={{
          variables: {
            colorPrimary: '#0000ff', // blue
            colorText: '#000000', // black
          },
        }}
      />
    </div>
  )
}

pages/sign-in.astro

---
import { SignIn } from '@clerk/astro/components'
---

<SignIn
  appearance={{
    colorPrimary: '#0000ff', // blue
    colorText: '#000000', // black
  }}
/>

src/pages/sign-in.vue

<script setup lang="ts">
import { SignIn } from '@clerk/vue'
</script>

<template>
  <SignIn :appearance="{ variables: { colorPrimary: '#0000ff', colorText: '#000000' } }" />
</template>

pages/sign-in.vue

<script setup lang="ts">
// Components are automatically imported
</script>

<template>
  <SignIn :appearance="{ colorPrimary: '#0000ff', colorText: '#000000' }" />
</template>

Using CSS variables

Warning

Please consider this approach with browser compatibility in mind, as it may not work in older browsers. See Browser Compatibility Considerations for details.

You can also use CSS variables to customize the appearance of Clerk components. This approach is particularly useful when:

You have a pre-defined design system with CSS custom properties
You want to support automatic dark/light mode switching
You need to dynamically update colors based on user preferences
You're integrating Clerk into an existing application with established CSS variables

The following example demonstrates how to use CSS variables to customize the appearance of Clerk components, but for maximum browser compatibility, it's recommended to use direct color values instead.

global.css

layout.tsx

/src/app/global.css

:root {
  --brand-primary: oklch(49.1% 0.27 292.581);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-primary: oklch(54.1% 0.281 293.009);
  }
}

/src/app/layout.tsx

import { ClerkProvider } from '@clerk/nextjs'
import './global.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider
      appearance={{
        variables: {
          colorPrimary: 'var(--brand-primary)',
        },
      }}
    >
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

Edit this page on GitHub

Last updated on Jul 8, 2025

Variables prop

Properties

Usage

Apply variables to all Clerk components

Apply variables to all instances of a Clerk component

Apply variables to a single Clerk component

Using CSS variables

Feedback

`Variables` prop

Apply `variables` to all Clerk components

Apply `variables` to all instances of a Clerk component

Apply `variables` to a single Clerk component