{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"onboarding-checklist","type":"registry:component","title":"Onboarding checklist","description":"A setup checklist that counts up as you go and celebrates the finish.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/onboarding-checklist.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { AnimatePresence, motion, useSpring, useTransform } from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport type Task = {\n id: string;\n title: string;\n description: string;\n action: string;\n};\n\nconst ICON_SWAP = { type: \"spring\", duration: 0.3, bounce: 0 } as const;\n// Slower than a UI transition on purpose: the ring and its number are the\n// reward, and half a second is long enough to watch them count up. No\n// bounce, so the number never reads past 100.\nconst RING = { visualDuration: 0.5, bounce: 0 };\n// Lets the last check and the ring reaching 100 land before the card\n// changes, so the finish is seen rather than skipped.\nconst CELEBRATE_AFTER = 700;\nconst RADIUS = 20;\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n\nexport function OnboardingChecklist({\n tasks,\n initialDone = [],\n initialOpen = [],\n onDismiss,\n className,\n}: {\n tasks: Task[];\n initialDone?: string[];\n initialOpen?: string[];\n onDismiss?: () => void;\n className?: string;\n}) {\n const reduceMotion = useReducedMotion();\n const [done, setDone] = useState(() => new Set(initialDone));\n const [open, setOpen] = useState(() => new Set(initialOpen));\n const [celebrating, setCelebrating] = useState(false);\n const [announcement, setAnnouncement] = useState(\"\");\n const titleId = useId();\n\n const count = tasks.filter((t) => done.has(t.id)).length;\n const complete = count === tasks.length;\n const progress = count / tasks.length;\n\n const ring = useSpring(progress, RING);\n const percent = useTransform(ring, (v) => Math.round(v * 100));\n useEffect(() => {\n if (reduceMotion) ring.jump(progress);\n else ring.set(progress);\n }, [progress, reduceMotion, ring]);\n\n useEffect(() => {\n if (!complete) return;\n const id = setTimeout(() => {\n setCelebrating(true);\n setAnnouncement(\"All tasks complete. You're all set.\");\n }, CELEBRATE_AFTER);\n return () => clearTimeout(id);\n }, [complete]);\n\n const toggle = (task: Task, value: boolean) => {\n const next = new Set(done);\n if (value) next.add(task.id);\n else next.delete(task.id);\n setDone(next);\n const total = tasks.filter((t) => next.has(t.id)).length;\n setAnnouncement(\n `${task.title} ${value ? \"done\" : \"not done\"}. ${total} of ${tasks.length} complete.`,\n );\n };\n\n const toggleOpen = (id: string) =>\n setOpen((o) => {\n const next = new Set(o);\n if (next.has(id)) next.delete(id);\n else next.add(id);\n return next;\n });\n\n return (\n \n
\n
\n

\n Get started\n

\n

\n {count} of {tasks.length} complete\n

\n
\n \n \n \n \n \n \n {percent}\n %\n \n \n
\n\n {/* The list and the finished state swap by collapsing one and opening\n the other, so the card only ever changes height below its header. */}\n \n
    \n {tasks.map((task) => (\n toggle(task, v)}\n onToggleOpen={() => toggleOpen(task.id)}\n />\n ))}\n
\n \n\n \n
\n {celebrating && (\n \n )}\n
\n \n\n

\n {announcement}\n

\n \n );\n}\n\nfunction Collapse({\n open,\n children,\n}: {\n open: boolean;\n children: React.ReactNode;\n}) {\n return (\n \n
{children}
\n \n );\n}\n\nfunction TaskRow({\n task,\n done,\n open,\n reduceMotion,\n onToggle,\n onToggleOpen,\n}: {\n task: Task;\n done: boolean;\n open: boolean;\n reduceMotion: boolean;\n onToggle: (value: boolean) => void;\n onToggleOpen: () => void;\n}) {\n const detailsId = `${useId()}-details`;\n return (\n
  • \n
    \n {/* A 40px hit area around the 20px box. */}\n \n\n \n \n {task.title}\n {/* Draws left to right when checked and retracts faster when\n unchecked: slow where it rewards, quick where it undoes. */}\n \n \n \n \n \n \n
    \n\n {/* 0fr to 1fr animates to the content's real height. The row above\n never moves; only what's below it slides. */}\n \n
    \n \n

    {task.description}

    \n {\n if (!done) onToggle(true);\n }}\n className={cn(\n \"grid h-9 rounded-full px-4 text-sm font-medium outline-hidden transition-[background-color,color,scale] duration-150 ease-out select-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-foreground\",\n done\n ? \"cursor-default bg-foreground/[0.06] text-muted-foreground\"\n : \"bg-foreground text-background active:scale-[0.96]\",\n )}\n >\n {/* Both labels share a cell so the button keeps its width. */}\n {task.action}\n \n Done\n \n \n
    \n \n \n
    • \n );\n}\n\nfunction ActionLabel({\n visible,\n icon,\n reduceMotion,\n children,\n}: {\n visible: boolean;\n icon?: boolean;\n reduceMotion?: boolean;\n children: React.ReactNode;\n}) {\n return (\n \n {icon && (\n \n \n \n )}\n \n {children}\n \n \n );\n}\n\nfunction Celebration({\n reduceMotion,\n onDismiss,\n}: {\n reduceMotion: boolean;\n onDismiss?: () => void;\n}) {\n // A rare, one-time moment, so it gets a gentle staggered entrance: the\n // heading, then the note, then the button, each 80ms apart.\n const enter = (i: number) => ({\n initial: reduceMotion\n ? { opacity: 0 }\n : { opacity: 0, y: 6, filter: \"blur(4px)\" },\n animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n transition: { duration: 0.4, ease: EASE_OUT, delay: 0.12 + i * 0.08 },\n });\n return (\n
    \n \n You're all set\n \n \n Your workspace is ready. You can find these steps again any time in Settings.\n \n \n \n Dismiss\n \n \n
    \n );\n}\n\nconst TASKS: Task[] = [\n {\n id: \"project\",\n title: \"Create your first project\",\n description: \"Projects keep pages, settings and people together in one place.\",\n action: \"New project\",\n },\n {\n id: \"invite\",\n title: \"Invite a teammate\",\n description: \"Work goes faster together. Each teammate gets their own login.\",\n action: \"Send invite\",\n },\n {\n id: \"github\",\n title: \"Connect GitHub\",\n description: \"Link a repository so commits and pull requests show up here.\",\n action: \"Connect\",\n },\n {\n id: \"notifications\",\n title: \"Set up notifications\",\n description: \"Choose where you hear about mentions and reviews: email, desktop or both.\",\n action: \"Choose channels\",\n },\n {\n id: \"workspace\",\n title: \"Personalize your workspace\",\n description: \"Add a logo and a name so the space feels like yours.\",\n action: \"Open settings\",\n },\n];\n\nexport default function OnboardingChecklistDemo() {\n const [dismissed, setDismissed] = useState(false);\n // A new key remounts the card fresh after \"Show checklist again\".\n const [round, setRound] = useState(0);\n const restoreRef = useRef(null);\n\n useEffect(() => {\n if (dismissed) restoreRef.current?.focus();\n }, [dismissed]);\n\n return (\n
    \n \n {dismissed ? (\n {\n setRound((r) => r + 1);\n setDismissed(false);\n }}\n initial={{ opacity: 0, filter: \"blur(4px)\" }}\n animate={{ opacity: 1, filter: \"blur(0px)\" }}\n exit={{ opacity: 0, transition: { duration: 0.1 } }}\n transition={{ duration: 0.25, ease: EASE_OUT }}\n className=\"h-9 rounded-full bg-muted px-4 text-sm font-medium text-foreground shadow-raised outline-hidden transition-[scale] duration-150 ease-out select-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-foreground active:scale-[0.96]\"\n >\n Show checklist again\n \n ) : (\n \n setDismissed(true)}\n />\n \n )}\n \n
    \n );\n}\n"},{"path":"hooks/use-reduced-motion.ts","type":"registry:hook","target":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n"}],"cssVars":{"light":{"shadow-raised":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"},"dark":{"shadow-raised":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"},"theme":{"shadow-raised":"var(--shadow-raised)"}},"categories":["feedback"],"docs":"From ui lab: https://lab.xevrion.dev/lab/onboarding-checklist"}