{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding-1",
  "title": "Welcome Checklist Card",
  "description": "Onboarding welcome card with a setup progress bar and three checkbox steps for reading docs, inviting the team, and configuring the workspace.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "checkbox",
    "progress",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/onboarding/1/onboarding-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Progress } from \"@/components/ui/progress\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\nconst STEPS = [\n  {\n    id: \"docs\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"BookOpen\"\n        tabler=\"IconBook2\"\n        hugeicons=\"BookOpenIcon\"\n        phosphor=\"BookOpen\"\n        remixicon=\"RiBookOpenLine\"\n        {...p}\n      />\n    ),\n    title: \"Read the docs\",\n    description:\n      \"Explore guides and API references to understand the platform.\",\n  },\n  {\n    id: \"team\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Users\"\n        tabler=\"IconUsersGroup\"\n        hugeicons=\"UserGroupIcon\"\n        phosphor=\"UsersThree\"\n        remixicon=\"RiTeamLine\"\n        {...p}\n      />\n    ),\n    title: \"Invite your team\",\n    description: \"Bring your colleagues on board and assign roles.\",\n  },\n  {\n    id: \"workspace\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Settings\"\n        tabler=\"IconSettings\"\n        hugeicons=\"SettingsIcon\"\n        phosphor=\"GearSix\"\n        remixicon=\"RiSettings4Line\"\n        {...p}\n      />\n    ),\n    title: \"Configure your workspace\",\n    description: \"Set up integrations, notifications, and preferences.\",\n  },\n]\n\nexport default function OnboardingBlock() {\n  const [done, setDone] = React.useState<Record<string, boolean>>({\n    docs: true,\n  })\n\n  const completed = STEPS.filter((s) => done[s.id]).length\n  const total = STEPS.length\n  const pct = Math.round((completed / total) * 100)\n  const allDone = completed === total\n\n  function toggle(id: string, checked: boolean) {\n    setDone((prev) => ({ ...prev, [id]: checked }))\n  }\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle className=\"text-base font-semibold\">\n            Welcome To Acme\n          </CardTitle>\n          <CardDescription>\n            Let&apos;s get your workspace ready in just a few steps. Complete\n            the checklist below to unlock everything Acme has to offer.\n          </CardDescription>\n          <div className=\"mt-3 flex flex-col gap-2\">\n            <div className=\"flex items-center justify-between text-xs\">\n              <span className=\"font-medium text-foreground\">\n                Setup progress\n              </span>\n              <span className=\"text-muted-foreground tabular-nums\">\n                <span className=\"font-medium text-foreground\">{completed}</span>{\" \"}\n                of {total}\n              </span>\n            </div>\n            <Progress\n              value={pct}\n              aria-label={`${completed} of ${total} steps completed`}\n            />\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"flex flex-col gap-0\">\n          <Separator />\n          {STEPS.map((step, index) => {\n            const Icon = step.icon\n            const isDone = !!done[step.id]\n            return (\n              <div key={step.id}>\n                <label className=\"flex cursor-pointer items-start gap-3 py-4\">\n                  <div\n                    className={cn(\n                      \"flex size-8 shrink-0 items-center justify-center rounded-lg\",\n                      isDone\n                        ? \"bg-primary text-primary-foreground\"\n                        : \"bg-muted text-muted-foreground\"\n                    )}\n                  >\n                    <Icon className=\"size-4\" aria-hidden=\"true\" />\n                  </div>\n                  <div className=\"flex flex-1 flex-col gap-0.5\">\n                    <span\n                      className={cn(\n                        \"text-xs font-medium\",\n                        isDone\n                          ? \"text-muted-foreground line-through\"\n                          : \"text-foreground\"\n                      )}\n                    >\n                      {step.title}\n                    </span>\n                    <span className=\"text-xs text-muted-foreground\">\n                      {step.description}\n                    </span>\n                  </div>\n                  <Checkbox\n                    checked={isDone}\n                    onCheckedChange={(checked) =>\n                      toggle(step.id, checked === true)\n                    }\n                    aria-label={`Mark \"${step.title}\" complete`}\n                    className=\"mt-0.5\"\n                  />\n                </label>\n                {index < STEPS.length - 1 && <Separator />}\n              </div>\n            )\n          })}\n          <Separator />\n        </CardContent>\n\n        <CardFooter>\n          <Button className=\"w-full\" disabled={!allDone}>\n            {allDone ? \"Finish Setup\" : \"Get Started\"}\n            <IconPlaceholder\n              lucide=\"ArrowRight\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRightIcon\"\n              phosphor=\"ArrowRight\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n        </CardFooter>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/onboarding-1.tsx"
    }
  ],
  "meta": {
    "height": "546px",
    "tier": "free"
  },
  "categories": [
    "onboarding"
  ],
  "type": "registry:block"
}