{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding-checklist",
  "type": "registry:ui",
  "title": "Onboarding checklist",
  "description": "A Get started card with a list of setup tasks that toggle between done and pending on click, showing a check box and a strikethrough on completed items.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/onboarding-checklist.tsx",
      "type": "registry:ui",
      "target": "components/ui/onboarding-checklist.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { CheckIcon } from \"lucide-react\"\n\nconst DEFAULT = [\n  { id: \"design\", label: \"Read DESIGN.md\", done: true },\n  { id: \"button\", label: \"Paste Button into your app\", done: true },\n  { id: \"gallery\", label: \"Browse the gallery\", done: false },\n  { id: \"showcase\", label: \"Open /showcase for clients\", done: false },\n]\n\nfunction OnboardingChecklist({\n  items = DEFAULT,\n  className,\n}: {\n  items?: { id: string; label: string; done?: boolean }[]\n  className?: string\n}) {\n  const [state, setState] = React.useState(items)\n  return (\n    <div data-slot=\"onboarding-checklist\" className={cn(\"rounded-2xl border border-border bg-surface p-5 shadow-highlight\", className)}>\n      <h3 className=\"text-sm font-medium text-fg\">Get started</h3>\n      <ul className=\"mt-4 space-y-2\">\n        {state.map((item) => (\n          <li key={item.id}>\n            <button\n              type=\"button\"\n              className=\"flex w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left text-sm outline-none hover:bg-sunken focus-visible:ring-2 focus-visible:ring-accent\"\n              onClick={() => setState((s) => s.map((x) => x.id === item.id ? { ...x, done: !x.done } : x))}\n            >\n              <span className={cn(\"flex size-5 items-center justify-center rounded-md border\", item.done ? \"border-accent bg-accent/15 text-accent\" : \"border-border text-transparent\")}>\n                <CheckIcon className=\"size-3.5\" />\n              </span>\n              <span className={cn(item.done && \"text-fg-muted line-through\")}>{item.label}</span>\n            </button>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\nexport { OnboardingChecklist }\n"
    }
  ]
}