4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T30ea,'use client'; import { Testimonials } from '@/components/ui/testimonials'; const QUOTES = [ { quote: 'This has completely reshaped how our team thinks about onboarding. The flow is intuitive, the defaults feel right, and our activation numbers jumped within the very first week of rolling it out.', cite: 'Maya Chen, CTO', }, { quote: 'Adopting it saved our small engineering team months of work. The primitives are flexible enough to fit our brand, secure enough for our enterprise customers, and the team behind it actually listens to feedback and ships fixes fast.', cite: 'Jordan Whitfield, Head of Engineering', }, { quote: "We rebuilt our entire signup experience in an afternoon. It's easily the best developer experience we've had all year.", cite: 'Priya Anand, Co-founder', }, ]; export default function WelcomeLayout({ children }: { children: React.ReactNode }) { return (

{children}

); } 53:T12c7,"use client" import { AnimatePresence, type HTMLMotionProps, motion, useCycle, useReducedMotion, } from "motion/react" import { useEffect } from "react" import useMeasure from "react-use-measure" type TestimonialsProps = { quotes: { quote: string cite: string }[] } const ANGLE_RAD = 40 * (Math.PI / 180) const SLIDE_ROOM = 20 const MASK_GRADIENT = "linear-gradient(-40deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 13.5%, rgba(0,0,0,0.99) 27%, rgba(0,0,0,0.99) 72%, rgba(0,0,0,0) 77.4%, rgba(0,0,0,0) 100%)" function getMask(width: number, height: number) { const diagonalSpan = height / Math.tan(ANGLE_RAD) + width const maskWidth = Math.round(diagonalSpan * SLIDE_ROOM) return { style: { maskImage: MASK_GRADIENT, maskSize: `${maskWidth}px ${height}px`, maskRepeat: "no-repeat", WebkitMaskImage: MASK_GRADIENT, WebkitMaskSize: `${maskWidth}px ${height}px`, WebkitMaskRepeat: "no-repeat", }, positions: { initial: "0px 0px", animate: `-${Math.round(maskWidth * 0.3)}px 0px`, exit: [ `-${Math.round(maskWidth * 0.8)}px 0px`, `-${Math.round(maskWidth * 0.9)}px 0px`, ], }, } } export function Testimonials({ quotes }: TestimonialsProps) { const [index, cycle] = useCycle( ...Array.from({ length: quotes.length }, (_, index) => index) ) const [measureRef, bounds] = useMeasure() const shouldReduceMotion = useReducedMotion() useEffect(() => { if (quotes.length === 0) return let interval: ReturnType | null = null const start = () => { if (interval) return interval = setInterval(() => cycle(), 7000) } const stop = () => { if (interval) { clearInterval(interval) interval = null } } const onVisibilityChange = () => { if (document.hidden) stop() else start() } start() document.addEventListener("visibilitychange", onVisibilityChange) return () => { stop() document.removeEventListener("visibilitychange", onVisibilityChange) } }, [cycle, quotes.length]) if (quotes.length === 0) { return null } const hasMeasured = bounds.height > 0 const mask = getMask(bounds.width, bounds.height) const animatedProps: HTMLMotionProps<"div"> = shouldReduceMotion ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, } : { initial: { opacity: 0, maskPosition: mask.positions.initial, filter: "blur(4px)", scale: 0.98, skewY: 1, rotate: -1, }, animate: { opacity: 1, maskPosition: mask.positions.animate, filter: "blur(0px)", scale: 1, skewY: 0, rotate: 0, }, exit: { opacity: 1, maskPosition: mask.positions.exit, filter: "blur(4px)", scale: 1.02, skewY: -1, rotate: 1, }, transition: { duration: 1.25, type: "spring", bounce: 0 }, } const currentQuote = quotes[index] if (!currentQuote) return null return (

{currentQuote.quote}
— {currentQuote.cite}

) } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@clerk/nextjs",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40clerk%2Fnextjs","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@clerk/nextjs"}]]}]}],["$","li","@clerk/ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40clerk%2Fui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@clerk/ui"}]]}]}],["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","react-use-measure",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/react-use-measure","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"react-use-measure"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["button"]}]]}],["$","$L50",null,{"sourceUrl":"https://clerk.com/r/nextjs-aio-multistep-onboarding.json","proxyUrl":"https://shadcnregistry.com/r/clerk/nextjs-aio-multistep-onboarding","itemId":"@clerk/nextjs-aio-multistep-onboarding"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"nextjs/aio/multistep-onboarding/welcome-layout.tsx","content":"$52","type":"registry:page","target":"app/welcome/layout.tsx"},{"path":"nextjs/aio/multistep-onboarding/welcome-page.tsx","content":"import { SignIn } from '@clerk/nextjs';\n\nexport default function WelcomePage() {\n return ;\n}\n","type":"registry:page","target":"app/welcome/[[...welcome]]/page.tsx"},{"path":"nextjs/common/multistep-onboarding/layout.tsx","content":"import type { Metadata } from 'next';\nimport { Geist, Geist_Mono } from 'next/font/google';\nimport { ClerkProvider } from '@/components/clerk-provider';\nimport './globals.css';\n\nconst geistSans = Geist({\n variable: '--font-sans',\n subsets: ['latin'],\n});\n\nconst geistMono = Geist_Mono({\n variable: '--font-mono',\n subsets: ['latin'],\n});\n\nexport const metadata: Metadata = {\n title: 'Create Next App',\n description: 'Generated by create next app',\n};\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode;\n}>) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n","type":"registry:page","target":"app/layout.tsx"},{"path":"nextjs/common/multistep-onboarding/testimonials.tsx","content":"$53","type":"registry:component","target":"components/ui/testimonials.tsx"},{"path":"nextjs/common/multistep-onboarding/clerk-provider.tsx","content":"import { ClerkProvider as ClerkNextJSProvider } from '@clerk/nextjs';\nimport { shadcn } from '@clerk/ui/themes';\n\ntype ClerkProviderProps = React.ComponentProps;\n\nexport function ClerkProvider({ children, appearance, ...props }: ClerkProviderProps) {\n return (\n \n {children}\n \n );\n}\n","type":"registry:component","target":"components/clerk-provider.tsx"},{"path":"nextjs/common/multistep-onboarding/proxy.ts","content":"import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'\n\nconst isProtectedRoute = createRouteMatcher(['/'])\n\nexport default clerkMiddleware(async (auth, req) => {\n if (isProtectedRoute(req)) {\n await auth.protect()\n }\n})\n\nexport const config = {\n matcher: [\n // Skip Next.js internals and all static files, unless found in search params\n '/((?!_next|[^?]*\\\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',\n // Always run for API routes\n '/(api|trpc)(.*)',\n // Always run for Clerk routes\n '/__clerk/(.*)',\n ],\n}\n","type":"registry:file","target":"src/proxy.ts"}]}]]}],"$L54"]}]

Multistep Onboarding Flow (AIO)

Installation

Files

app

components

src

Styles