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:
npm install @clerk/themes
yarn add @clerk/themes
pnpm add @clerk/themes
bun add @clerk/themes
Then pass the shadcn theme to the ClerkProvider component as the baseTheme
property:
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.