Clerk Shadcn UI

Overview

Clerk's shadcn/ui registry lets Next.js projects add Clerk authentication with the shadcn CLI. Clerk documents it as a way to bootstrap an app with prebuilt pages, components and configuration in a single command, either through a complete quickstart package or by adding individual items.

The @clerk/nextjs-quickstart package installs an app layout with ClerkProvider and theme integration, sign-in and sign-up pages with catch-all routes, Clerk middleware for route protection, a header with authentication buttons and a dark and light theme provider. The registry manifest lists 12 items, including multistep onboarding flows.

Features

• Quickstart package: One command sets up the provider, auth pages, middleware, header and theme provider.
• Sign-in page: A dedicated route for users to sign in to their account.
• Sign-up page: A two-column layout with a list of selling points next to the sign-up form.
• Waitlist page: A basic <Waitlist /> implementation hosted on /waitlist.
• ClerkProvider component: Provides session and user context to Clerk's hooks and components.
• Middleware file: Adds clerkMiddleware() for route protection.
• Onboarding flows: Multistep onboarding blocks built with Clerk components and custom flows.

Tech stack

• Next.js
• @clerk/nextjs, @clerk/ui
• shadcn/ui, next-themes

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @clerk/component-name