@clerk

Official Clerk authentication components distributed through the shadcn CLI. Provides pre-built, themeable React sign-in, sign-up, user-profile, and organization-management UI components that integrate directly with Clerk's authentication backend. Designed for Next.js, Remix, and other React frameworks. Not open-source in the traditional sense — requires a Clerk account. Use for: adding Clerk-powered auth flows with shadcn-compatible styling without manually building every auth screen.

12 components react shadcn-cli

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://clerk.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://clerk.com/r/registry.json

bun bunx shadcn@latest add https://clerk.com/r/registry.json

fetch registry curl -s https://clerk.com/r/registry.json

Components

12 total

Clerk Provider (App Router) component

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.json

Clerk Next.js Middleware file

The clerkMiddleware() helper integrates Clerk authentication into your Next.js application through Middleware. clerkMiddleware() is compatible with both the Ap…

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

Theme Provider component

A theme provider component using next-themes for dark mode support.

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

Header Component component

A header component with Clerk authentication buttons and user button.

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

Layout with Header page

A root layout component with Clerk provider, theme provider, and header.

npx shadcn@latest add https://clerk.com/r/nextjs-layout-with-header.json

Clerk Next.js Quickstart (App Router) block

A quickstart for Next.js App Router with Clerk authentication.

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

Clerk Next.js Quickstart — Sign-in-or-up (App Router) block

A minimal Clerk quickstart for Next.js App Router with a single combined sign-in-or-up page (no separate sign-up route).

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

Clerk Next.js Sign In Page (App Router) page

A sign in page for Next.js App Router with Clerk authentication.

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

Clerk Next.js Sign Up Page (App Router) page

A sign up page for Next.js App Router with Clerk authentication.

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

Clerk Next.js Waitlist Page (App Router) page

A waitlist page for Next.js App Router with Clerk authentication.

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

Multistep Onboarding Flow (AIO) block

A multistep onboarding flow using Clerk's prebuilt <SignIn> component with embedded session tasks.

npx shadcn@latest add https://clerk.com/r/nextjs-aio-multistep-onboarding.json

Multistep Onboarding Flow block

A custom sign-up and sign-in onboarding flow using Clerk's useSignIn and useSignUp hooks with animated step transitions.

npx shadcn@latest add https://clerk.com/r/nextjs-custom-flows-multistep-onboarding.json