{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding-6",
  "title": "Dismissible Getting Started Widget",
  "description": "Compact getting-started widget with a dismiss button, progress bar, and a five-step checklist showing completed steps struck through.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "progress"
  ],
  "files": [
    {
      "path": "registry/blocks/onboarding/6/onboarding-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Progress } from \"@/components/ui/progress\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst steps = [\n  { label: \"Create your account\", done: true },\n  { label: \"Set up your workspace\", done: true },\n  { label: \"Invite your team\", done: false },\n  { label: \"Connect an integration\", done: false },\n  { label: \"Create your first project\", done: false },\n]\n\nexport default function OnboardingBlock() {\n  const [open, setOpen] = useState(true)\n  if (!open) return null\n\n  const completed = steps.filter((step) => step.done).length\n  const percent = Math.round((completed / steps.length) * 100)\n\n  return (\n    <section className=\"flex min-h-svh w-full items-center justify-center bg-muted/30 px-6 py-16 text-foreground\">\n      <div className=\"w-full max-w-sm rounded-xl border border-border bg-background\">\n        <div className=\"flex items-start justify-between gap-3 border-b border-border p-4\">\n          <div className=\"flex flex-col gap-2\">\n            <h2 className=\"font-heading text-sm font-semibold tracking-tight\">\n              Getting started\n            </h2>\n            <span className=\"text-xs text-muted-foreground tabular-nums\">\n              {completed} of {steps.length} complete\n            </span>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => setOpen(false)}\n            aria-label=\"Dismiss\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"X\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"X\"\n              remixicon=\"RiCloseLine\"\n              className=\"size-4\"\n              aria-hidden=\"true\"\n            />\n          </button>\n        </div>\n\n        <div className=\"px-4 pt-4\">\n          <Progress value={percent} className=\"h-1.5\" />\n        </div>\n\n        <ul className=\"flex flex-col p-2\">\n          {steps.map((step) => (\n            <li key={step.label}>\n              <button\n                type=\"button\"\n                className=\"flex w-full items-center gap-3 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted/60\"\n              >\n                <span\n                  className={cn(\n                    \"flex size-5 shrink-0 items-center justify-center rounded-full border\",\n                    step.done\n                      ? \"border-foreground bg-foreground text-background\"\n                      : \"border-border\"\n                  )}\n                >\n                  {step.done && (\n                    <IconPlaceholder\n                      lucide=\"Check\"\n                      tabler=\"IconCheck\"\n                      hugeicons=\"Tick02Icon\"\n                      phosphor=\"Check\"\n                      remixicon=\"RiCheckLine\"\n                      className=\"size-3\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n                <span\n                  className={cn(\n                    \"flex-1\",\n                    step.done\n                      ? \"text-muted-foreground line-through\"\n                      : \"text-foreground\"\n                  )}\n                >\n                  {step.label}\n                </span>\n                {!step.done && (\n                  <IconPlaceholder\n                    lucide=\"ArrowRight\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRightIcon\"\n                    phosphor=\"ArrowRight\"\n                    remixicon=\"RiArrowRightLine\"\n                    className=\"size-4 text-muted-foreground\"\n                    aria-hidden=\"true\"\n                  />\n                )}\n              </button>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/onboarding-6.tsx"
    }
  ],
  "meta": {
    "height": "433px",
    "tier": "free"
  },
  "categories": [
    "onboarding"
  ],
  "type": "registry:block"
}