{
  "name": "stepper-vertical-demo",
  "type": "registry:example",
  "registryDependencies": [
    "stepper"
  ],
  "files": [
    {
      "path": "examples/stepper-vertical-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  Stepper,\n  StepperContent,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperList,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/bases/radix/ui/stepper\";\n\nconst steps = [\n  {\n    value: \"placed\",\n    title: \"Order Placed\",\n    description: \"Your order has been successfully placed\",\n  },\n  {\n    value: \"processing\",\n    title: \"Processing\",\n    description: \"We're preparing your items for shipment\",\n  },\n  {\n    value: \"shipped\",\n    title: \"Shipped\",\n    description: \"Your order is on its way to you\",\n  },\n  {\n    value: \"delivered\",\n    title: \"Delivered\",\n    description: \"Order delivered to your address\",\n  },\n];\n\nexport default function StepperVerticalDemo() {\n  return (\n    <Stepper defaultValue=\"shipped\" orientation=\"vertical\">\n      <StepperList>\n        {steps.map((step) => (\n          <StepperItem key={step.value} value={step.value}>\n            <StepperTrigger className=\"not-last:pb-6\">\n              <StepperIndicator />\n              <div className=\"flex flex-col gap-1\">\n                <StepperTitle>{step.title}</StepperTitle>\n                <StepperDescription>{step.description}</StepperDescription>\n              </div>\n            </StepperTrigger>\n            <StepperSeparator className=\"absolute inset-y-0 top-5 left-3.5 -z-10 -order-1 h-full -translate-x-1/2\" />\n          </StepperItem>\n        ))}\n      </StepperList>\n      {steps.map((step) => (\n        <StepperContent\n          key={step.value}\n          value={step.value}\n          className=\"flex flex-col gap-4 rounded-lg border bg-card p-6 text-card-foreground\"\n        >\n          <div className=\"flex flex-col gap-px\">\n            <h4 className=\"font-semibold\">{step.title}</h4>\n            <p className=\"text-sm text-muted-foreground\">{step.description}</p>\n          </div>\n          <p className=\"text-sm\">\n            This is the content for {step.title}. You can add forms,\n            information, or any other content here.\n          </p>\n        </StepperContent>\n      ))}\n    </Stepper>\n  );\n}\n",
      "target": ""
    }
  ]
}