Skip to main content

shadcn/ui theme compatibility

Category
Product
Published

Introducing a new Clerk theme based on shadcn/ui that styles Clerk's components according to your shadcn/ui theme.

Clerk components now support a dedicated shadcn/ui theme that automatically matches your application's existing shadcn/ui theme configuration. Built on the new CSS variables support, this theme ensures Clerk's authentication UI feels native to your shadcn/ui-based applications.

Installation

To install the shadcn theme, run the following command to install the @clerk/themes package:

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

Then pass the shadcn theme to the ClerkProvider component as the baseTheme property:

app/layout.tsx
import { shadcn } from '@clerk/themes'

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <ClerkProvider
      appearance={{
        baseTheme: shadcn,
      }}
    >
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

For more information on Clerk themes, see the themes documentation.

Contributor
Alex Carpenter

Share this article