āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/guides/development/shadcn-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.
Get started with Clerk authentication in seconds using the complete quickstart package:
npx shadcn@latest add @clerk/nextjs-quickstart
This single command will install:
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-page
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-page
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-page
<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-provider
With 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>
)
}
The clerkMiddleware() helper integrates Clerk authentication into your Next.js application through Middleware.
npx shadcn@latest add @clerk/nextjs-middleware
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā