{
  "name": "stepper-demo",
  "type": "registry:example",
  "registryDependencies": [
    "stepper"
  ],
  "files": [
    {
      "path": "examples/stepper-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  Stepper,\n  StepperContent,\n  StepperIndicator,\n  StepperItem,\n  StepperList,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/bases/radix/ui/stepper\";\n\nconst steps = [\n  {\n    value: \"account\",\n    title: \"Account Setup\",\n    description: \"Create your account and verify email\",\n  },\n  {\n    value: \"profile\",\n    title: \"Profile Information\",\n    description: \"Add your personal details and preferences\",\n  },\n  {\n    value: \"payment\",\n    title: \"Payment Details\",\n    description: \"Set up billing and payment methods\",\n  },\n  {\n    value: \"complete\",\n    title: \"Complete Setup\",\n    description: \"Review and finish your account setup\",\n  },\n];\n\nexport default function StepperDemo() {\n  return (\n    <Stepper defaultValue=\"account\" className=\"w-full max-w-md\">\n      <StepperList>\n        {steps.map((step) => (\n          <StepperItem key={step.value} value={step.value}>\n            <StepperTrigger>\n              <StepperIndicator />\n            </StepperTrigger>\n            <StepperSeparator />\n          </StepperItem>\n        ))}\n      </StepperList>\n      {steps.map((step) => (\n        <StepperContent\n          key={step.value}\n          value={step.value}\n          className=\"flex flex-col items-center gap-4 rounded-md border bg-card p-4 text-card-foreground\"\n        >\n          <div className=\"flex flex-col items-center gap-px text-center\">\n            <h3 className=\"text-lg font-semibold\">{step.title}</h3>\n            <p className=\"text-muted-foreground\">{step.description}</p>\n          </div>\n          <p className=\"text-sm\">Content for {step.title} goes here.</p>\n        </StepperContent>\n      ))}\n    </Stepper>\n  );\n}\n",
      "target": ""
    }
  ]
}