# shadcn/ui theme compatibility 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](https://clerk.com/changelog/2025-07-15-clerk-css-variables-support.md), this theme ensures Clerk's authentication UI feels native to your shadcn/ui-based applications. [View video](./shadcn-theme.mp4) ## Installation To install the shadcn theme, run the following command to install the `@clerk/themes` package: **npm** filename: terminal ```bash npm install @clerk/themes ``` **yarn** filename: terminal ```bash yarn add @clerk/themes ``` **pnpm** filename: terminal ```bash pnpm add @clerk/themes ``` **bun** filename: terminal ```bash bun add @clerk/themes ``` Then pass the shadcn theme to the ClerkProvider component as the `baseTheme` property: filename: app/layout.tsx ```tsx import { shadcn } from '@clerk/themes' export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } ``` For more information on Clerk themes, see the [themes documentation](https://clerk.com/docs/customization/themes.md#shadcn).