{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding-flow",
  "type": "registry:component",
  "title": "Onboarding flow",
  "description": "A three step onboarding card for naming a workspace, inviting teammates by email and reviewing theme choices, with step progress and back or continue.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/input.json",
    "https://ui.minidev.pro/r/step-progress.json"
  ],
  "files": [
    {
      "path": "registry/blocks/onboarding-flow.tsx",
      "type": "registry:ui",
      "target": "components/ui/onboarding-flow.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { StepProgress } from \"@/components/ui/step-progress\"\n\nconst STEPS = [\"Workspace\", \"Team\", \"Theme\"]\n\nfunction OnboardingFlow() {\n  const [step, setStep] = React.useState(0)\n  return (\n    <div data-slot=\"onboarding-flow\" className=\"mx-auto max-w-lg space-y-6 rounded-2xl border border-border bg-surface p-6 shadow-highlight\">\n      <div>\n        <h3 className=\"text-lg font-medium tracking-[-0.014em] text-fg\">Set up your workspace</h3>\n        <p className=\"mt-1 text-sm text-fg-muted\">Three steps. You can change any of this later.</p>\n      </div>\n      <StepProgress steps={STEPS} current={step} />\n      {step === 0 && (\n        <div className=\"space-y-3\">\n          <label className=\"block text-sm text-fg\">Workspace name\n            <Input className=\"mt-1.5\" placeholder=\"Acme Design\" />\n          </label>\n        </div>\n      )}\n      {step === 1 && (\n        <div className=\"space-y-3\">\n          <label className=\"block text-sm text-fg\">Invite emails\n            <Input className=\"mt-1.5\" placeholder=\"you@team.com, design@team.com\" />\n          </label>\n        </div>\n      )}\n      {step === 2 && (\n        <div className=\"rounded-xl border border-border bg-sunken p-4 text-sm text-fg-muted\">\n          Accent hue 285 · Geist Sans · Hairline depth. You can tune later in DESIGN.md.\n        </div>\n      )}\n      <div className=\"flex justify-between gap-2\">\n        <Button variant=\"outline\" size=\"sm\" disabled={step === 0} onClick={() => setStep((s) => Math.max(0, s - 1))}>Back</Button>\n        <Button size=\"sm\" onClick={() => setStep((s) => Math.min(STEPS.length - 1, s + 1))}>\n          {step === STEPS.length - 1 ? \"Finish\" : \"Continue\"}\n        </Button>\n      </div>\n    </div>\n  )\n}\nexport { OnboardingFlow }\n"
    }
  ]
}