Clerk Blocks

Get Started

Clerk Blocks is a registry of functional, reusable shadcn/ui blocks to be used with Clerk Authentication.

These components can be modified, flexed, and used however works best for your use case. I will try to highlight some example use cases, but the important thing to note is that the code you copy and paste is yours.

Compatibility

This registry only officially supports Next.js projects today, but there are plans to support additional frameworks, starting with Vite / TanStack Start.

FrameworkVersion(s)Support
Next.js14, 15, 16✅ Full
Tanstack RouterN/A⚠️ Partial

Prerequisites

Configure Clerk

Full Clerk quickstart documentation can be found available here.

  1. Install Clerk
npm install @clerk/nextjs
  1. Hook up Proxy (Middleware on Next.js 15 and below)
proxy.ts
import { clerkMiddleware } from "@clerk/nextjs/server"; 

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
    // Always run for API routes
    "/(api|trpc)(.*)",
  ],
};

export default clerkMiddleware();
  1. Add a ClerkProvider to the Root Layout of your project
layout.tsx
import { ClerkProvider } from "@clerk/nextjs"; 

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ClerkProvider>
          <main>{children}</main>
        </ClerkProvider>
      </body>
    </html>
  );
}
  1. A .env or .env.local file must be present with your NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY, which can be found on the Clerk dashboard.
.env
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY = "pk_test_xxx";
CLERK_SECRET_KEY = "sk_test_xxx";

Configure shadcn/ui

  1. Install shadcn/ui
npx shadcn@latest init
  1. Download sonner component
npx shadcn@latest add sonner
  1. Add <Toaster /> to your Root Layout
layout.tsx
import { ClerkProvider } from "@clerk/nextjs";
import { Toaster } from "@/components/ui/sonner"; 

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ClerkProvider>
          <main>{children}</main>
          <Toaster />
        </ClerkProvider>
      </body>
    </html>
  );
}

Once this setup has been completed, you are ready to begin copying components.

Usage

After finding a component you'd like to use, copy the installation command relevant to your project's package manager (npm, pnpmn, yarn, or bun) and execute it in the terminal. The shadcn registry will automatically install dependencies and relevant files into your project.

Once a component has been installed, refer to the usage guide on it to see examples of how it can be used.

Components

Here's the growing list of available components.

On this page

CompatibilityPrerequisitesConfigure ClerkConfigure shadcn/uiUsage