Themes

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

• The default theme
• The "Dark" Theme
• The "Shades of Purple" Theme
• The "Neobrutalism" Theme

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

Dark theme

import {dark} from "@clerk/themes";

Shades of purple theme

import {shadesOfPurple} from "@clerk/themes";

Neobrutalism theme

import {neobrutalism} from "@clerk/themes";

Last updated on December 15, 2023