{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "nextjs-aio-multistep-onboarding", "type": "registry:block", "title": "Multistep Onboarding Flow (AIO)", "description": "A multistep onboarding flow using Clerk's prebuilt component with embedded session tasks.", "dependencies": [ "@clerk/nextjs", "@clerk/ui", "motion", "react-use-measure", "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "nextjs/aio/multistep-onboarding/welcome-layout.tsx", "content": "'use client';\n\nimport { Testimonials } from '@/components/ui/testimonials';\n\nconst QUOTES = [\n {\n quote:\n '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.',\n cite: 'Maya Chen, CTO',\n },\n {\n quote:\n '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.',\n cite: 'Jordan Whitfield, Head of Engineering',\n },\n {\n quote:\n \"We rebuilt our entire signup experience in an afternoon. It's easily the best developer experience we've had all year.\",\n cite: 'Priya Anand, Co-founder',\n },\n];\n\nexport default function WelcomeLayout({ children }: { children: React.ReactNode }) {\n return (\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n {children}\n
\n
\n \n \n \n
\n );\n}\n", "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": "\"use client\"\n\nimport {\n AnimatePresence,\n type HTMLMotionProps,\n motion,\n useCycle,\n useReducedMotion,\n} from \"motion/react\"\nimport { useEffect } from \"react\"\nimport useMeasure from \"react-use-measure\"\n\ntype TestimonialsProps = {\n quotes: {\n quote: string\n cite: string\n }[]\n}\n\nconst ANGLE_RAD = 40 * (Math.PI / 180)\nconst SLIDE_ROOM = 20\nconst MASK_GRADIENT =\n \"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%)\"\n\nfunction getMask(width: number, height: number) {\n const diagonalSpan = height / Math.tan(ANGLE_RAD) + width\n const maskWidth = Math.round(diagonalSpan * SLIDE_ROOM)\n\n return {\n style: {\n maskImage: MASK_GRADIENT,\n maskSize: `${maskWidth}px ${height}px`,\n maskRepeat: \"no-repeat\",\n WebkitMaskImage: MASK_GRADIENT,\n WebkitMaskSize: `${maskWidth}px ${height}px`,\n WebkitMaskRepeat: \"no-repeat\",\n },\n positions: {\n initial: \"0px 0px\",\n animate: `-${Math.round(maskWidth * 0.3)}px 0px`,\n exit: [\n `-${Math.round(maskWidth * 0.8)}px 0px`,\n `-${Math.round(maskWidth * 0.9)}px 0px`,\n ],\n },\n }\n}\n\nexport function Testimonials({ quotes }: TestimonialsProps) {\n const [index, cycle] = useCycle(\n ...Array.from({ length: quotes.length }, (_, index) => index)\n )\n const [measureRef, bounds] = useMeasure()\n const shouldReduceMotion = useReducedMotion()\n\n useEffect(() => {\n if (quotes.length === 0) return\n\n let interval: ReturnType | null = null\n\n const start = () => {\n if (interval) return\n interval = setInterval(() => cycle(), 7000)\n }\n\n const stop = () => {\n if (interval) {\n clearInterval(interval)\n interval = null\n }\n }\n\n const onVisibilityChange = () => {\n if (document.hidden) stop()\n else start()\n }\n\n start()\n document.addEventListener(\"visibilitychange\", onVisibilityChange)\n\n return () => {\n stop()\n document.removeEventListener(\"visibilitychange\", onVisibilityChange)\n }\n }, [cycle, quotes.length])\n\n if (quotes.length === 0) {\n return null\n }\n\n const hasMeasured = bounds.height > 0\n const mask = getMask(bounds.width, bounds.height)\n\n const animatedProps: HTMLMotionProps<\"div\"> = shouldReduceMotion\n ? {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: { duration: 0.2 },\n }\n : {\n initial: {\n opacity: 0,\n maskPosition: mask.positions.initial,\n filter: \"blur(4px)\",\n scale: 0.98,\n skewY: 1,\n rotate: -1,\n },\n animate: {\n opacity: 1,\n maskPosition: mask.positions.animate,\n filter: \"blur(0px)\",\n scale: 1,\n skewY: 0,\n rotate: 0,\n },\n exit: {\n opacity: 1,\n maskPosition: mask.positions.exit,\n filter: \"blur(4px)\",\n scale: 1.02,\n skewY: -1,\n rotate: 1,\n },\n transition: { duration: 1.25, type: \"spring\", bounce: 0 },\n }\n\n const currentQuote = quotes[index]\n if (!currentQuote) return null\n\n return (\n \n \n \n \n \n
\n \n \n

\n {currentQuote.quote}\n

\n \n — {currentQuote.cite}\n \n \n \n
\n \n \n )\n}\n", "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" } ], "css": { "@import \"@clerk/ui/themes/shadcn.css\"": {} } }