Clerk Shadcn UI
blocknextjs-quickstart-sign-in-or-upsource: ok · hit
Clerk Next.js Quickstart — Sign-in-or-up (App Router)
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 add "https://clerk.com/r/nextjs-quickstart-sign-in-or-up.json"free
Where it goes
loginsignup
Visual style
minimal
Use cases
saas-landing
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
button@clerk/nextjs-clerk-provider@clerk/nextjs-middleware@clerk/nextjs-theme-provider@clerk/nextjs-header@clerk/nextjs-layout-with-header
Files2 · source cached 10/14/2026, 2:00:14 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>
);
}
nextjs/aio/quickstart-sign-in-or-up/sign-in.tsx
import { SignIn } from '@clerk/nextjs';
export default function SignInPage() {
return (
<div className='bg-muted flex w-full flex-1 items-center justify-center p-6 md:p-10'>
<SignIn withSignUp />
</div>
);
}