Install Clerk with shadcn/ui CLI
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.
Quickstart
Get started with Clerk authentication in seconds using the complete quickstart package:
npx shadcn@latest add @clerk/nextjs-quickstartpnpm dlx shadcn@latest add @clerk/nextjs-quickstartyarn dlx shadcn@latest add @clerk/nextjs-quickstartbun x shadcn@latest add @clerk/nextjs-quickstartThis 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
Sign In
The sign-in page is a dedicated page that allows users to sign in to their account.
npx shadcn@latest add @clerk/nextjs-sign-in-pagepnpm dlx shadcn@latest add @clerk/nextjs-sign-in-pageyarn dlx shadcn@latest add @clerk/nextjs-sign-in-pagebun x shadcn@latest add @clerk/nextjs-sign-in-pageSign Up
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.
npx shadcn@latest add @clerk/nextjs-sign-up-pagepnpm dlx shadcn@latest add @clerk/nextjs-sign-up-pageyarn dlx shadcn@latest add @clerk/nextjs-sign-up-pagebun x shadcn@latest add @clerk/nextjs-sign-up-pageWaitlist
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.
npx shadcn@latest add @clerk/nextjs-waitlist-pagepnpm dlx shadcn@latest add @clerk/nextjs-waitlist-pageyarn dlx shadcn@latest add @clerk/nextjs-waitlist-pagebun x shadcn@latest add @clerk/nextjs-waitlist-pageComponents
<ClerkProvider />
The <ClerkProvider /> component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components.
npx shadcn@latest add @clerk/nextjs-clerk-providerpnpm dlx shadcn@latest add @clerk/nextjs-clerk-provideryarn dlx shadcn@latest add @clerk/nextjs-clerk-providerbun x shadcn@latest add @clerk/nextjs-clerk-providerWith the ClerkProvider component installed, you can wrap your app's layout to provide Clerk's authentication context to your app.
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.
npx shadcn@latest add @clerk/nextjs-middlewarepnpm dlx shadcn@latest add @clerk/nextjs-middlewareyarn dlx shadcn@latest add @clerk/nextjs-middlewarebun x shadcn@latest add @clerk/nextjs-middlewareFeedback
Last updated on