componentnextjs-clerk-providersource: ok · hit

Clerk Provider (App Router)

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 add "https://clerk.com/r/nextjs-clerk-provider.json"

free

Clerk Shadcn UI

No selection tags yet — empty means no evidence, not lack of support.

Dependencies

Bundle weight · light

@clerk/nextjs@clerk/ui

Files1 · source cached 10/14/2026, 2:18:19 PM

nextjs/common/clerk-provider/clerk-provider.tsx

import { ClerkProvider as ClerkNextJSProvider } from '@clerk/nextjs';
import { shadcn } from '@clerk/ui/themes';

type ClerkProviderProps = React.ComponentProps<typeof ClerkNextJSProvider>;

export function ClerkProvider({ children, appearance, ...props }: ClerkProviderProps) {
  return (
    <ClerkNextJSProvider
      appearance={{
        theme: shadcn,
        ...appearance,
      }}
      {...props}
    >
      {children}
    </ClerkNextJSProvider>
  );
}

More from Clerk Shadcn UI

Multistep Onboarding Flow (AIO)block Multistep Onboarding Flowblock Header Componentcomponent Layout with Headerpage Clerk Next.js Middlewarefile Clerk Next.js Quickstart (App Router)block Clerk Next.js Quickstart — Sign-in-or-up (App Router)block

Browse all components in this library →