Install Clerk with shadcn/ui CLI

Namespace vs shadcn CLI
1. Namespace registry
Quickstart
Pages
Components
1. <ClerkProvider />
Files
1. Middleware

The shadcn/ui CLI is a tool that allows you to bootstrap your Next.js app with Clerk. Clerk's shadcn/ui registry enables developers to add pre-built components and configurations to their projects with a single command. You can either get started with the complete quickstart package, or add pages and components individually.

Namespace vs shadcn CLI

The examples in this guide offer two different approaches for installing Clerk features: by setting up a namespace for cleaner commands, or by using the shadcn CLI directly with a URL.

Both approaches use the shadcn/ui CLI. The difference is how components are referenced:

Approach	When to use	Example command
Namespace	Best for ongoing work. Cleaner commands after a one-time setup.	`npx shadcn@latest add @clerk/nextjs-sign-in-page`
shadcn CLI	Best for quick one-off installs. Doesn't require editing `components.json`.	`npx shadcn@latest add https://clerk.com/r/nextjs-sign-in-page.json`

Namespace registry

To get started with the namespace approach, paste the following code into your components.json file to configure the @clerk registry namespace.

{
  "registries": {
    "@clerk": "https://clerk.com/r/{name}.json"
  }
}

Then use the following command to add components:

npm

pnpm

yarn

bun

terminal

npx shadcn@latest add @clerk/[component-name]

terminal

pnpm dlx shadcn@latest add @clerk/[component-name]

terminal

yarn shadcn@latest add @clerk/[component-name]

terminal

bunx --bun shadcn@latest add @clerk/[component-name]

Quickstart

Get started with Clerk authentication in seconds using the complete quickstart package:

Namespace

shadcn CLI

npm

pnpm

yarn

bun

terminal

npx shadcn@latest add @clerk/nextjs-quickstart

terminal

pnpm dlx shadcn@latest add @clerk/nextjs-quickstart

terminal

yarn shadcn@latest add @clerk/nextjs-quickstart

terminal

bunx --bun shadcn@latest add @clerk/nextjs-quickstart

npm

pnpm

yarn

bun

terminal

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

terminal

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

terminal

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

terminal

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

Pages

The sign-in page is a dedicated page that allows users to sign in to their account.

Namespace

shadcn CLI

npm

pnpm

yarn

bun

terminal

npx shadcn@latest add @clerk/nextjs-sign-in-page

terminal

pnpm dlx shadcn@latest add @clerk/nextjs-sign-in-page

terminal

yarn shadcn@latest add @clerk/nextjs-sign-in-page

terminal

bunx --bun shadcn@latest add @clerk/nextjs-sign-in-page

npm

pnpm

yarn

bun

terminal

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

terminal

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

terminal

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

terminal

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

The sign-up page is a dedicated page that allows users to sign up for a new account which includes a two column layout with a list of selling points and a form to sign up.

Namespace

shadcn CLI

npm

pnpm

yarn

bun

terminal

npx shadcn@latest add @clerk/nextjs-sign-up-page

terminal

pnpm dlx shadcn@latest add @clerk/nextjs-sign-up-page

terminal

yarn shadcn@latest add @clerk/nextjs-sign-up-page

terminal

bunx --bun shadcn@latest add @clerk/nextjs-sign-up-page

npm

pnpm

yarn

bun

terminal

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

terminal

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

terminal

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

terminal

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

Waitlist

The following example includes a basic implementation of the <Waitlist /> component hosted on the /waitlist route. You can use this as a starting point for your own implementation.

Namespace

shadcn CLI

npm

pnpm

yarn

bun

terminal

npx shadcn@latest add @clerk/nextjs-waitlist-page

terminal

pnpm dlx shadcn@latest add @clerk/nextjs-waitlist-page

terminal

yarn shadcn@latest add @clerk/nextjs-waitlist-page

terminal

bunx --bun shadcn@latest add @clerk/nextjs-waitlist-page

npm

pnpm

yarn

bun

terminal

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

terminal

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

terminal

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

terminal

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

Components

`<ClerkProvider />`

The <ClerkProvider /> component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components.

Namespace

shadcn CLI

npm

pnpm

yarn

bun

terminal

npx shadcn@latest add @clerk/nextjs-clerk-provider

terminal

pnpm dlx shadcn@latest add @clerk/nextjs-clerk-provider

terminal

yarn shadcn@latest add @clerk/nextjs-clerk-provider

terminal

bunx --bun shadcn@latest add @clerk/nextjs-clerk-provider

npm

pnpm

yarn

bun

terminal

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

terminal

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

terminal

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

terminal

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

With the ClerkProvider component installed, you can wrap your app's layout to provide Clerk's authentication context to your app.

app/layout.tsx

import { ClerkProvider } from '@/components/clerk-provider'
import './globals.css'

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

Files

Middleware

The clerkMiddleware() helper integrates Clerk authentication into your Next.js application through Middleware.

Namespace

shadcn CLI

npm

pnpm

yarn

bun

terminal

npx shadcn@latest add @clerk/nextjs-middleware

terminal

pnpm dlx shadcn@latest add @clerk/nextjs-middleware

terminal

yarn shadcn@latest add @clerk/nextjs-middleware

terminal

bunx --bun shadcn@latest add @clerk/nextjs-middleware

npm

pnpm

yarn

bun

terminal

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

terminal

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

terminal

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

terminal

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

Edit on GitHub

Last updated on Oct 1, 2025

Install Clerk with shadcn/ui CLI

Feedback