---
name: "@clerk"
slug: "clerk"
description: "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."
category: "Auth/identity"
tags: ["auth", "cards", "components", "marketing", "media", "onboarding", "pro-available", "theming"]
framework: "react"
license: null
author: null
website: "https://clerk.com/docs/guides/development/shadcn-cli"
github: "N/A"
registry: "https://clerk.com/r/registry.json"
pro: true
pro_url: "https://clerk.com/pricing"
github_stars: null
component_count: 12
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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.

## Links

- Website: https://clerk.com/docs/guides/development/shadcn-cli
- GitHub: N/A
- Registry JSON: https://clerk.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/clerk
- This file: https://sh4dcn.vercel.app/md/clerk.md
- Pro / pricing: https://clerk.com/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://clerk.com/r/registry.json
pnpm dlx shadcn@latest add https://clerk.com/r/registry.json
bunx shadcn@latest add https://clerk.com/r/registry.json
# clone the source repo
git clone N/A.git
# fetch the raw registry index
curl -s https://clerk.com/r/registry.json
```

## Components (12)

| name | type | description | install |
| --- | --- | --- | --- |
| nextjs-clerk-provider | registry: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` |
| nextjs-middleware | registry: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` |
| nextjs-theme-provider | registry:component | A theme provider component using next-themes for dark mode support. | `npx shadcn@latest add https://clerk.com/r/nextjs-theme-provider.json` |
| nextjs-header | registry:component | A header component with Clerk authentication buttons and user button. | `npx shadcn@latest add https://clerk.com/r/nextjs-header.json` |
| nextjs-layout-with-header | registry: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` |
| nextjs-quickstart | registry:block | A quickstart for Next.js App Router with Clerk authentication. | `npx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json` |
| nextjs-quickstart-sign-in-or-up | registry: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` |
| nextjs-sign-in-page | registry: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` |
| nextjs-sign-up-page | registry: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` |
| nextjs-waitlist-page | registry:page | A waitlist page for Next.js App Router with Clerk authentication. | `npx shadcn@latest add https://clerk.com/r/nextjs-waitlist-page.json` |
| nextjs-aio-multistep-onboarding | registry: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` |
| nextjs-custom-flows-multistep-onboarding | registry: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` |

## For AI agents

```text
You are adding components from @clerk to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/clerk.md) for the component list.
2. Fetch the machine-readable index: https://clerk.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: clerk).
```