Skip to main content
Docs

Themes

Clerk currently offers six prebuilt themes for you to customize the overall appearance of your Clerk application.

Installation

  1. To get started, install the @clerk/themes package.

    terminal
    npm install @clerk/themes
    terminal
    pnpm add @clerk/themes
    terminal
    yarn add @clerk/themes
    terminal
    bun add @clerk/themes

  2. To use a theme, import it from @clerk/themes and apply it using the appearance prop.

Usage

You can apply themes at different levels depending on your needs:

  • Across all Clerk components
  • All instances of a Clerk component
  • A single Clerk component

For more customization options, refer to the Advanced usage section.

Apply a theme to all Clerk components

To apply a theme to all Clerk components, pass the appearance prop to the clerk.load() method. The appearance prop accepts the property theme, which can be set to a theme.

In the following example, the "Dark" theme is applied to all Clerk components.

Use the following tabs to view the code necessary for each file.

import { Clerk } from '@clerk/clerk-js'
import { dark } from '@clerk/themes'

const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load({
  appearance: {
    theme: dark,
  },
})

if (clerk.isSignedIn) {
  document.getElementById('app').innerHTML = `
      <div id="user-button"></div>
    `

  const userButtonDiv = document.getElementById('user-button')

  clerk.mountUserButton(userButtonDiv)
} else {
  document.getElementById('app').innerHTML = `
      <div id="sign-in"></div>
    `

  const signInDiv = document.getElementById('sign-in')

  clerk.mountSignIn(signInDiv)
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clerk + JavaScript App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="main.js" async crossorigin="anonymous"></script>
  </body>
</html>

Apply a theme to all instances of a Clerk component

To apply a theme to all instances of a Clerk component, you can pass the name of the Clerk component itself to the appearance prop.

In the following example, the "Neobrutalism" theme is applied to all instances of the <SignIn /> component.

Use the following tabs to view the code necessary for each file.

import { Clerk } from '@clerk/clerk-js'
import { dark, neobrutalism } from '@clerk/themes'

const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load({
  appearance: {
    theme: dark,
    signIn: { theme: neobrutalism },
  },
})

if (clerk.isSignedIn) {
  document.getElementById('app').innerHTML = `
      <div id="user-button"></div>
    `

  const userButtonDiv = document.getElementById('user-button')

  clerk.mountUserButton(userButtonDiv)
} else {
  document.getElementById('app').innerHTML = `
      <div id="sign-in"></div>
    `

  const signInDiv = document.getElementById('sign-in')

  clerk.mountSignIn(signInDiv)
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clerk + JavaScript App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="main.js" async crossorigin="anonymous"></script>
  </body>
</html>

Apply a theme to a single Clerk component

To apply a theme to a single Clerk component, pass the theme property to the appearance prop of the Clerk component.

In the following example, the "Dark" theme is applied to the <SignIn /> component.

<SignIn
  appearance={{
    theme: dark,
  }}
/>

Advanced usage

Apply multiple themes

You can also stack themes by passing an array of themes to the theme property of the appearance prop. The themes will be applied in the order they are listed. If styles overlap, the last defined theme will take precedence.

In the following example, the "Dark" theme is applied first, then the "Neobrutalism" theme is applied on top of it.

Use the following tabs to view the code necessary for each file.

import { Clerk } from '@clerk/clerk-js'
import { dark, neobrutalism } from '@clerk/themes'

const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load({
  appearance: {
    theme: [dark, neobrutalism],
  },
})

if (clerk.isSignedIn) {
  document.getElementById('app').innerHTML = `
      <div id="user-button"></div>
    `

  const userButtonDiv = document.getElementById('user-button')

  clerk.mountUserButton(userButtonDiv)
} else {
  document.getElementById('app').innerHTML = `
      <div id="sign-in"></div>
    `

  const signInDiv = document.getElementById('sign-in')

  clerk.mountSignIn(signInDiv)
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clerk + JavaScript App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="main.js" async crossorigin="anonymous"></script>
  </body>
</html>

Customize a theme using variables

You can customize a theme by passing an object of variables to the variables property of the appearance prop. The variables property is used to adjust the general styles of the component's base theme, like colors, backgrounds, typography.

Important

For a list of all of the variables you can customize, and for more examples on how to use the variables property, see the Variables docs.

In the following example, the primary color of the themes are customized.

Use the following tabs to view the code necessary for each file.

import { Clerk } from '@clerk/clerk-js'
import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes'

const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load({
  appearance: {
    theme: [dark, neobrutalism],
    variables: { colorPrimary: 'blue' },
    signIn: {
      theme: [shadesOfPurple],
      variables: { colorPrimary: 'blue' },
    },
  },
})

if (clerk.isSignedIn) {
  document.getElementById('app').innerHTML = `
      <div id="user-button"></div>
    `

  const userButtonDiv = document.getElementById('user-button')

  clerk.mountUserButton(userButtonDiv)
} else {
  document.getElementById('app').innerHTML = `
      <div id="sign-in"></div>
    `

  const signInDiv = document.getElementById('sign-in')

  clerk.mountSignIn(signInDiv)
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clerk + JavaScript App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="main.js" async crossorigin="anonymous"></script>
  </body>
</html>

Available themes

Clerk provides six prebuilt themes:

Default theme

Applied by default when no other theme is provided.

A sign-in form with a light theme

"Simple" theme

This theme is a stripped down "Default" theme that removes some more advanced styling techniques, making it easier to apply your own custom styles.

To use the simple theme, set theme to simple:

<ClerkProvider
  appearance={{
    theme: 'simple',
  }}
/>
A sign-in form with a simple theme

"shadcn" theme

Important

This theme is compatible with Tailwind CSS v4 usage. If you need support for Tailwind CSS v3, pass the shadcn variables manually to your <ClerkProvider />'s variables object.

When using the shadcn/ui library, you can use the shadcn theme to apply the shadcn/ui styles to your Clerk components. This will adapt to both light and dark mode automatically.

Important

It's recommended to also import the shadcn.css file within your global.css file. Tailwind scans source files as plain text to detect which classes to generate - classes that only exist in external configurations won't be included in the final CSS.

@import 'tailwindcss';
@import '@clerk/themes/shadcn.css';
A sign-in form with a shadcn theme in light mode
A sign-in form with a shadcn theme in dark mode

"Dark" theme

To use the dark theme, set theme to dark:

<ClerkProvider
  appearance={{
    theme: 'dark',
  }}
/>
A sign-in form with a dark theme

"Shades of purple" theme

To use the shades of purple theme, set theme to shadesOfPurple:

<ClerkProvider
  appearance={{
    theme: 'shadesOfPurple',
  }}
/>
A sign-in form with a purple and yellow theme

"Neobrutalism" theme

To use the neobrutalism theme, set theme to neobrutalism:

<ClerkProvider
  appearance={{
    theme: 'neobrutalism',
  }}
/>
A sign-in form with a neobrutalist red theme

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on