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.
Quick Start
Get started with Clerk authentication in seconds using the complete quickstart package:
npx shadcn@latest add https://clerk.com/r/nextjs-quickstart.jsonpnpm dlx shadcn@latest add https://clerk.com/r/nextjs-quickstart.jsonyarn shadcn@latest add https://clerk.com/r/nextjs-quickstart.jsonbunx --bun shadcn@latest add https://clerk.com/r/nextjs-quickstart.jsonThis 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 https://clerk.com/r/nextjs-sign-in-page.jsonpnpm dlx shadcn@latest add https://clerk.com/r/nextjs-sign-in-page.jsonyarn shadcn@latest add https://clerk.com/r/nextjs-sign-in-page.jsonbunx --bun shadcn@latest add https://clerk.com/r/nextjs-sign-in-page.jsonSign 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 https://clerk.com/r/nextjs-sign-up-page.jsonpnpm dlx shadcn@latest add https://clerk.com/r/nextjs-sign-up-page.jsonyarn shadcn@latest add https://clerk.com/r/nextjs-sign-up-page.jsonbunx --bun shadcn@latest add https://clerk.com/r/nextjs-sign-up-page.jsonComponents
<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 https://clerk.com/r/nextjs-clerk-provider.jsonpnpm dlx shadcn@latest add https://clerk.com/r/nextjs-clerk-provider.jsonyarn shadcn@latest add https://clerk.com/r/nextjs-clerk-provider.jsonbunx --bun shadcn@latest add https://clerk.com/r/nextjs-clerk-provider.jsonWith 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 helper integrates Clerk authentication into your Next.js application through Middleware.
npx shadcn@latest add https://clerk.com/r/nextjs-middleware.jsonpnpm dlx shadcn@latest add https://clerk.com/r/nextjs-middleware.jsonyarn shadcn@latest add https://clerk.com/r/nextjs-middleware.jsonbunx --bun shadcn@latest add https://clerk.com/r/nextjs-middleware.jsonFeedback
Last updated on