# shadcn/ui registry support

![Clerk sign-up page using shadcn/ui registry](./sign-up-page.png){{ breakout: true }}

Clerk components are now available through the Clerk component registry, which is fully compatible with the [shadcn/ui CLI](https://ui.shadcn.com/docs/cli). This integration brings the familiar `shadcn add` workflow to Clerk, making it easier than ever to add authentication to your Next.js applications with pre-configured components that match your shadcn/ui theme.

## What's included

The Clerk component registry includes everything you need to get started with Clerk authentication in a Next.js project:

- **Complete quickstart setup** - Layout, sign-in/up pages, middleware, and components
- **Individual components** - `ClerkProvider`, authentication pages, and middleware
- **Pre-configured theming** - Automatic shadcn/ui theme integration
- **Environment variables** - Automatic setup for required Clerk configuration

## Quick Start

Add Clerk to your project with the quickstart block:

```npm
npx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json
```

This single command will install:

- App layout with `ClerkProvider` and theme integration
- Sign-in and sign-up pages with catch-all routes
- Clerk middleware for route protection
- Header component with authentication buttons
- Theme provider for dark/light mode support

## Individual Components

Prefer to install components individually? You can add specific pieces as needed.

### Authentication Pages

**Sign In**

```npm
npx shadcn@latest add https://clerk.com/r/nextjs-sign-in-page.json
```

**Sign Up**

```npm
npx shadcn@latest add https://clerk.com/r/nextjs-sign-up-page.json
```

### `ClerkProvider` Component

```npm
npx shadcn@latest add https://clerk.com/r/nextjs-clerk-provider.json
```

### Clerk Middleware

```npm
npx shadcn@latest add https://clerk.com/r/nextjs-middleware.json
```

To learn more about the available pages, components, and files, see the [Next.js shadcn/ui registry documentation](https://clerk.com/docs/references/nextjs/shadcn.md).

## What's Next

This initial release focuses on Next.js support. We're actively working on expanding the Clerk component registry to include components for other popular frameworks and meta-frameworks in the future. If you're interested in support for a specific framework, please [let us know](https://clerk.com/contact/support) which one you'd like to see next!