"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { ArrowRightIcon, CheckIcon, ChevronDownIcon, XIcon } from "@kineticui/icons"; export type ChecklistTask = { id: string; title: string; description?: string; done?: boolean; action?: { label: string; onClick: () => void }; time?: string }; export type OnboardingChecklistProps = { title?: string; tasks: ChecklistTask[]; onToggle?: (id: string, done: boolean) => void; onDismiss?: () => void; /** Shown when every task is done. */ reward?: React.ReactNode; defaultCollapsed?: boolean; className?: string; }; /** "Get started" checklist: progress ring, expandable tasks with CTAs, collapse and a completion state. */ export function OnboardingChecklist({ title = "Get started", tasks, onToggle, onDismiss, reward, defaultCollapsed, className }: OnboardingChecklistProps) { const [collapsed, setCollapsed] = React.useState(!!defaultCollapsed); const firstOpen = tasks.find((t) => !t.done)?.id ?? null; const [open, setOpen] = React.useState(firstOpen); const done = tasks.filter((t) => t.done).length; const pct = done / Math.max(1, tasks.length); const complete = done === tasks.length; const r = 16; const c = 2 * Math.PI * r; React.useEffect(() => setOpen(firstOpen), [firstOpen]); return (

{Math.round(pct * 100)}%

{complete ? "You're all set!" : title} {done} of {tasks.length} done

{onDismiss ? ( ) : null}

{!collapsed ? ( {complete && reward ? ( {reward} ) : null}

{isOpen && !t.done && (t.description || t.action) ? (
{t.description ?
{t.description}
: null} {t.action ? ( ) : null}
) : null}

) : null}

); }

Onboarding Checklist

Installation

Exports