54: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"] 55: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"] 56: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"] 59:I[8513,["/_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"],"ScrollArea"] 5a:I[8513,["/_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"],"ScrollBar"] 4d:["$","span",null,{"className":"text-xs font-medium","children":"input-otp"}] 4e:["$","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"}]]}]}] 4f:["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}] 50:["$","$L54",null,{"registryDependencies":["button","checkbox","field","input","input-otp","label","radio-group"]}] 51:["$","$L55",null,{"sourceUrl":"https://clerk.com/r/nextjs-custom-flows-multistep-onboarding.json","proxyUrl":"https://shadcnregistry.com/r/clerk/nextjs-custom-flows-multistep-onboarding","itemId":"@clerk/nextjs-custom-flows-multistep-onboarding"}] 57:Tee55,'use client'; import { AnimatePresence, motion, useReducedMotion } from 'motion/react'; import { useState, useCallback, useMemo, useEffect, useRef } from 'react'; import { useRouter } from 'next/navigation'; import { useForm } from '@tanstack/react-form'; import { useSignIn, useSignUp, useOrganizationList, useOrganizationCreationDefaults, useSession } from '@clerk/nextjs'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { Field, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '@/components/ui/field'; import { Input } from '@/components/ui/input'; import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'; import { REGEXP_ONLY_DIGITS } from 'input-otp'; import { RefreshCwIcon, ChevronLeftIcon, LoaderIcon, CameraIcon, XIcon } from 'lucide-react'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { Testimonials } from '@/components/ui/testimonials'; type Step = 'email' | 'welcome' | 'company' | 'account' | 'verify' | 'org'; type VerifyMode = 'sign_up_email_code' | 'client_trust_email_code' | null; function toFieldErrors(errors: unknown[]): { message: string }[] { return errors.map(e => ({ message: typeof e === 'string' ? e : String(e), })); } const SIGNUP_STEPS: Step[] = ['company', 'account', 'verify', 'org']; const STEP_FIELDS: Record = { email: ['email'], welcome: ['password'], company: ['companySize'], account: ['firstName', 'lastName', 'password', 'agreedToTerms'], verify: ['otpCode'], org: ['orgName'], }; const COMPANY_SIZES = ['1-10', '11-50', '51-200', '201-500', '501-1000', '1000+'] as const; 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', }, ]; const dotVariants = { active: { width: '18px', backgroundColor: 'var(--color-foreground)' }, completed: { width: '8px', backgroundColor: 'var(--color-foreground)' }, upcoming: { width: '8px', backgroundColor: 'var(--color-muted-foreground)' }, }; const stepVariants = { enter: (dir: 1 | -1) => ({ opacity: 0, filter: 'blur(4px)', transform: `translateX(${dir === 1 ? 40 : -40}px)`, }), center: { opacity: 1, filter: 'blur(0px)', transform: 'translateX(0px)' }, exit: (dir: 1 | -1) => ({ opacity: 0, filter: 'blur(4px)', transform: `translateX(${dir === 1 ? -40 : 40}px)`, }), }; const stepContentVariants = { enter: {}, center: { transition: { staggerChildren: 0.05 } }, exit: {}, }; const stepItemVariants = { enter: (dir: 1 | -1) => ({ opacity: 0, transform: `translateX(${dir === 1 ? 20 : -20}px)`, filter: 'blur(4px)', }), center: { opacity: 1, transform: 'translateX(0px)', filter: 'blur(0px)' }, exit: (dir: 1 | -1) => ({ opacity: 0, transform: `translateX(${dir === 1 ? -20 : 20}px)`, filter: 'blur(4px)', }), }; export default function Home() { const router = useRouter(); const { signIn, errors: signInErrors, fetchStatus: signInFetch } = useSignIn(); const { signUp, errors: signUpErrors, fetchStatus: signUpFetch } = useSignUp(); const { createOrganization, setActive } = useOrganizationList(); const { data: orgDefaults } = useOrganizationCreationDefaults(); const { session } = useSession(); const [currentStep, setCurrentStep] = useState('email'); const [direction, setDirection] = useState<1 | -1>(1); const [verifyMode, setVerifyMode] = useState(null); const [isCreatingOrg, setIsCreatingOrg] = useState(false); const [orgError, setOrgError] = useState(null); const [orgLogoFile, setOrgLogoFile] = useState(null); const [orgLogoPreview, setOrgLogoPreview] = useState(null); const submittingRef = useRef(false); const shouldReduceMotion = useReducedMotion(); const isLoading = signInFetch === 'fetching' || signUpFetch === 'fetching'; const activeStepVariants = shouldReduceMotion ? { enter: { opacity: 0 }, center: { opacity: 1 }, exit: { opacity: 0 }, } : stepVariants; const activeItemVariants = shouldReduceMotion ? { enter: { opacity: 0 }, center: { opacity: 1 }, exit: { opacity: 0 }, } : stepItemVariants; const form = useForm({ defaultValues: { email: '', companySize: '1-10', firstName: '', lastName: '', password: '', agreedToTerms: false, otpCode: '', orgName: '', }, onSubmit: async () => { // handled via Clerk in verify step }, }); type FieldName = | 'email' | 'companySize' | 'firstName' | 'lastName' | 'password' | 'agreedToTerms' | 'otpCode' | 'orgName'; const goTo = useCallback((step: Step, dir: 1 | -1 = 1) => { setDirection(dir); setCurrentStep(step); }, []); const validateCurrentStep = useCallback(async () => { const fields = STEP_FIELDS[currentStep] as FieldName[]; const results = await Promise.all(fields.map(field => form.validateField(field, 'change'))); for (const field of fields) { form.setFieldMeta(field, prev => ({ ...prev, isTouched: true })); } return results.every(errors => !errors || (Array.isArray(errors) && errors.length === 0)); }, [form, currentStep]); // Revoke the object URL on unmount to avoid a memory leak useEffect(() => { return () => { if (orgLogoPreview) { URL.revokeObjectURL(orgLogoPreview); } }; }, [orgLogoPreview]); // If session has a pending choose-organization task, navigate to org step useEffect(() => { if (session?.currentTask?.key === 'choose-organization' && currentStep !== 'org') { goTo('org'); } }, [session?.currentTask?.key, currentStep, goTo]); // Seed org name from Clerk defaults (e.g. "Jane's Organization") useEffect(() => { if (orgDefaults?.form.name && !form.getFieldValue('orgName')) { form.setFieldValue('orgName', orgDefaults.form.name); } }, [orgDefaults?.form.name, form]); // Derive the displayed auth error from whichever Clerk hook owns the // current step. Field-level errors are rendered inline next to their // inputs, so this slot only surfaces global (non-field) errors. const authError = useMemo(() => { const useSignUpErrors = currentStep === 'company' || currentStep === 'account' || (currentStep === 'verify' && verifyMode === 'sign_up_email_code'); const source = useSignUpErrors ? signUpErrors : signInErrors; return source.global?.[0]?.longMessage ?? source.global?.[0]?.message ?? null; }, [currentStep, verifyMode, signInErrors, signUpErrors]); // Single navigate handler for every signIn/signUp finalize call. // decorateUrl must wrap every destination URL — Safari ITP requires it // to return an external URL that must be navigated via window.location. const finalizeNavigate = useCallback( async ({ session: freshSession, decorateUrl, }: { session?: { currentTask?: { key: string } } | null; decorateUrl: (url: string) => string; }) => { if (freshSession?.currentTask?.key === 'choose-organization') { goTo('org'); return; } const url = decorateUrl('/'); if (url.startsWith('https://')) { window.location.href = url; } else { router.push(url); } }, [router, goTo], ); const signupStepIndex = SIGNUP_STEPS.indexOf(currentStep); const isOnSignupFlow = signupStepIndex !== -1; const canGoBack = currentStep !== 'email' && currentStep !== 'org'; const handleNext = async () => { if (submittingRef.current) return; const valid = await validateCurrentStep(); if (!valid) return; submittingRef.current = true; try { if (currentStep === 'email') { const { error } = await signIn.create({ identifier: form.getFieldValue('email'), }); // Note: this branch only fires when user enumeration is enabled. With // enumeration disabled the API will not surface "identifier not found" // and every email will appear to exist — see README. const errorCode = error && 'errors' in error ? (error as { errors?: Array<{ code?: string }> }).errors?.[0]?.code : error?.code; if (errorCode === 'form_identifier_not_found') { goTo('company'); return; } if (error) { // Any other error stays on this step; derived authError surfaces it. return; } goTo('welcome'); return; } if (currentStep === 'welcome') { const { error } = await signIn.password({ password: form.getFieldValue('password'), }); if (error) return; if (signIn.status === 'complete') { await signIn.finalize({ navigate: finalizeNavigate }); } else if (signIn.status === 'needs_client_trust' || signIn.status === 'needs_second_factor') { // This app always collects an email address, so an email-code factor // is guaranteed to be available for both client-trust and 2FA. const { error: mfaError } = await signIn.mfa.sendEmailCode(); if (mfaError) return; setVerifyMode('client_trust_email_code'); goTo('verify'); } return; } if (currentStep === 'company') { goTo('account'); return; } if (currentStep === 'account') { const { error: signUpError } = await signUp.password({ emailAddress: form.getFieldValue('email'), password: form.getFieldValue('password'), firstName: form.getFieldValue('firstName'), lastName: form.getFieldValue('lastName'), unsafeMetadata: { companySize: form.getFieldValue('companySize'), }, }); if (signUpError) { if (signUpError.code === 'form_identifier_exists') { goTo('email', -1); } return; } const { error: sendError } = await signUp.verifications.sendEmailCode(); if (sendError) return; setVerifyMode('sign_up_email_code'); goTo('verify'); return; } if (currentStep === 'verify') { if (verifyMode === 'sign_up_email_code' && !signUp.id) { goTo('email', -1); return; } if (verifyMode === 'client_trust_email_code' && !signIn.id) { goTo('email', -1); return; } const code = form.getFieldValue('otpCode'); if (verifyMode === 'client_trust_email_code') { const { error } = await signIn.mfa.verifyEmailCode({ code }); if (error) return; if (signIn.status === 'complete') { await signIn.finalize({ navigate: finalizeNavigate }); } } else { const { error } = await signUp.verifications.verifyEmailCode({ code, }); if (error) return; if (signUp.status === 'complete') { await signUp.finalize({ navigate: finalizeNavigate }); } } return; } if (currentStep === 'org') { const orgName = form.getFieldValue('orgName'); if (!orgName.trim()) return; if (!createOrganization || !setActive) return; setIsCreatingOrg(true); setOrgError(null); try { const org = await createOrganization({ name: orgName.trim() }); const logoFile = orgLogoFile ?? (orgDefaults?.form.logo ? await fetch(orgDefaults.form.logo) .then(r => r.blob()) .catch(() => null) : null); if (logoFile) { await org.setLogo({ file: logoFile }); } await setActive({ organization: org.id }); router.push('/'); } catch (err) { setOrgError(err instanceof Error ? err.message : 'Failed to create organization'); setIsCreatingOrg(false); } return; } } finally { submittingRef.current = false; } }; const handlePrevious = () => { if (currentStep === 'welcome') { signIn.reset(); goTo('email', -1); return; } if (currentStep === 'verify') { setVerifyMode(null); form.setFieldValue('otpCode', ''); form.setFieldMeta('otpCode', prev => ({ ...prev, isTouched: false, errors: [], })); if (verifyMode === 'sign_up_email_code') { signUp.reset(); goTo('account', -1); } else { signIn.reset(); goTo('welcome', -1); } return; } if (currentStep === 'company') { goTo('email', -1); return; } if (isOnSignupFlow && signupStepIndex > 0) { const prevStep = SIGNUP_STEPS[signupStepIndex - 1]; if (prevStep) { goTo(prevStep, -1); } } }; const handleResend = async () => { if (verifyMode === 'sign_up_email_code') { await signUp.verifications.sendEmailCode(); } else { await signIn.mfa.sendEmailCode(); } }; return ( <>

{/* Email */} {currentStep === 'email' && (

What's your email address?

Create your account or sign in.

{ e.preventDefault(); handleNext(); }} > { if (!value.trim()) return 'Email is required'; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return 'Enter a valid email address'; }, }} > {field => { const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid; return ( Email field.handleChange(e.target.value)} onBlur={field.handleBlur} aria-invalid={isInvalid || undefined} /> {isInvalid && } ); }} {authError &&

{authError}

}

)} {/* Welcome Back */} {currentStep === 'welcome' && (

Welcome back

{ e.preventDefault(); handleNext(); }} > { if (!value) return 'Password is required'; if (value.length < 8) return 'Password must be at least 8 characters'; }, }} > {field => { const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid; return ( Password field.handleChange(e.target.value)} onBlur={field.handleBlur} aria-invalid={isInvalid || undefined} /> {isInvalid && } {signInErrors?.fields?.password && ( )} ); }} {authError &&

{authError}

}

)} {/* Company Size */} {currentStep === 'company' && (

How large is your company?

We'll use this to personalize your experience.

{ e.preventDefault(); handleNext(); }} onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); handleNext(); } }} > (!value ? 'Please select a company size' : undefined), }} > {field => { const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid; return (

Number of employees field.handleChange(value as typeof field.state.value)} className='grid grid-cols-2 gap-2' > {COMPANY_SIZES.map(size => ( {size} ))} {isInvalid && }

); }}

)} {/* Account Details */} {currentStep === 'account' && (

Create your account

{ e.preventDefault(); handleNext(); }} > {field => ( Email {signUpErrors?.fields?.emailAddress && ( )} )} { if (!value.trim()) return 'First name is required'; }, }} > {field => { const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid; return ( First name field.handleChange(e.target.value)} onBlur={field.handleBlur} aria-invalid={isInvalid || undefined} /> {isInvalid && } ); }} { if (!value.trim()) return 'Last name is required'; }, }} > {field => { const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid; return ( Last name field.handleChange(e.target.value)} onBlur={field.handleBlur} aria-invalid={isInvalid || undefined} /> {isInvalid && } ); }} { if (!value) return 'Password is required'; if (value.length < 8) return 'Password must be at least 8 characters'; }, }} > {field => { const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid; return ( Password field.handleChange(e.target.value)} onBlur={field.handleBlur} aria-invalid={isInvalid || undefined} /> {isInvalid && } {signUpErrors?.fields?.password && ( )} ); }} { if (value !== true) return 'You must agree to the terms'; }, }} > {field => { const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid; return ( field.handleChange(checked === true)} />

I agree to the Terms of Service and Privacy Policy {isInvalid && }

); }} {/* Required by Clerk for bot protection */}

{authError &&

{authError}

} )} {/* OTP Verification */} {currentStep === 'verify' && (

Verify your email

We sent a code to {form.getFieldValue('email')}

{ e.preventDefault(); handleNext(); }} > { if (!value.trim()) return 'Verification code is required'; if (!/^\d{6}$/.test(value)) return 'Enter a 6-digit code'; }, }} > {field => { const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid; const clerkCodeError = verifyMode === 'client_trust_email_code' ? signInErrors?.fields?.code : signUpErrors?.fields?.code; return (

Verification code

field.handleChange(value)} onComplete={handleNext} onBlur={field.handleBlur} > {isInvalid && } {clerkCodeError && } ); }} {authError &&

{authError}

}

)} {/* Create Organization */} {currentStep === 'org' && (

Create your organization

Set up your workspace to get started.

{ e.preventDefault(); handleNext(); }} > Logo

{orgLogoPreview || orgDefaults?.form.logo ? ( Organization logo

) : ( s.values.orgName}> {orgName => ( {orgName?.charAt(0)?.toUpperCase() || '?'} )} )}

{ const file = e.target.files?.[0]; if (file) { if (orgLogoPreview) { URL.revokeObjectURL(orgLogoPreview); } setOrgLogoFile(file); setOrgLogoPreview(URL.createObjectURL(file)); } }} />

{ if (!value.trim()) return 'Organization name is required'; }, }} > {field => { const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid; return ( Organization name field.handleChange(e.target.value)} onBlur={field.handleBlur} aria-invalid={isInvalid || undefined} /> {isInvalid && } ); }} {orgDefaults?.advisory?.code === 'organization_already_exists' && (

An organization “ {orgDefaults.advisory.meta?.organization_name} ” already exists for the domain “ {orgDefaults.advisory.meta?.organization_domain} ”.

)} {orgError &&

{orgError}

}

)}

{currentStep !== 'email' && ( {isOnSignupFlow && ( {SIGNUP_STEPS.map((_, i) => ( ))} )} )}

); } 58: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}

) } 52:["$","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"}],["$","$L56",null,{"files":[{"path":"nextjs/custom-flows/multistep-onboarding/page.tsx","content":"$57","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":"$58","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"}]}]]}] 53:["$","section",null,{"className":"flex flex-col gap-4","id":"styles","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Styles"}],["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @4xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L59",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L5a",null,{"orientation":"vertical"}],["$","$L5a",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L59",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L5a",null,{"orientation":"vertical"}],["$","$L5a",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L59",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L5a",null,{"orientation":"vertical"}],["$","$L5a",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","p",null,{"className":"text-sm text-foreground/70 py-2 px-2","children":"No CSS found."}]}]]}]]}]}]]}]

Multistep Onboarding Flow

Installation

Files

app

components

src

Styles