Skip to Content
You are viewing a beta version of Clerk Docs
Visit the latest docs
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

Themes

Clerk currently offers four pre-built themes that can be exported from @clerk/themes:

Usage

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

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

To use a theme, import it from @clerk/themes and pass it to the appearance prop of a Clerk component. 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. For guided examples and to learn further about how to use themes, see the Appearance prop documentiation.

Default theme

Applied by default when no other theme is provided.

A sign-in form with a light theme

Dark theme

import {dark} from "@clerk/themes";
A sign-in form with a dark theme

Shades of purple theme

import {shadesOfPurple} from "@clerk/themes";
A sign-in form with a purple and yellow theme

Neobrutalism theme

import {neobrutalism} from "@clerk/themes";
A sign-in form with a neobrutalist red theme

Last updated on December 15, 2023

What did you think of this content?

Clerk © 2024