pagenextjs-layout-with-headersource: ok · hit

Layout with Header

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

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

free

Clerk Shadcn UI

Where it goes

navbar

Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.

Dependencies

Bundle weight · light

@clerk/nextjs@clerk/uinext-themes

Registry dependencies

@clerk/nextjs-clerk-provider@clerk/nextjs-theme-provider@clerk/nextjs-header

Files1 · source cached 10/9/2026, 9:27:42 PM

nextjs/common/layout-with-header/layout-with-header.tsx

import { ClerkProvider } from '@/components/clerk-provider';
import { Header } from '@/components/header';
import { ThemeProvider } from '@/components/theme-provider';
import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import { cn } from '@/lib/utils';
import './globals.css';

const geist = Geist({
  variable: '--font-sans',
  subsets: ['latin'],
});

const geistMono = Geist_Mono({
  variable: '--font-mono',
  subsets: ['latin'],
});

export const metadata: Metadata = {
  title: 'Clerk Next.js Quickstart',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang='en'
      className={cn('h-full', geist.variable, geistMono.variable)}
      suppressHydrationWarning
    >
      <body className='flex min-h-full flex-col antialiased'>
        <ClerkProvider>
          <ThemeProvider
            attribute='class'
            defaultTheme='system'
            enableSystem
            disableTransitionOnChange
          >
            <Header />
            {children}
          </ThemeProvider>
        </ClerkProvider>
      </body>
    </html>
  );
}

More from Clerk Shadcn UI

Multistep Onboarding Flow (AIO)block Clerk Provider (App Router)component Multistep Onboarding Flowblock Header Componentcomponent 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 →