shadcn/ui registry support

Clerk components are now available through the Clerk component registry, which is fully compatible with the shadcn/ui 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:

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

pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json

yarn shadcn@latest add https://clerk.com/r/nextjs-quickstart.json

bunx --bun 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

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

pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-sign-in-page.json

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

bunx --bun shadcn@latest add https://clerk.com/r/nextjs-sign-in-page.json

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

pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-sign-up-page.json

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

bunx --bun shadcn@latest add https://clerk.com/r/nextjs-sign-up-page.json

ClerkProvider Component

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

pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-clerk-provider.json

yarn shadcn@latest add https://clerk.com/r/nextjs-clerk-provider.json

bunx --bun shadcn@latest add https://clerk.com/r/nextjs-clerk-provider.json

Clerk Middleware

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

pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-middleware.json

yarn shadcn@latest add https://clerk.com/r/nextjs-middleware.json

bunx --bun 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.

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 which one you'd like to see next!