{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "vertical-stepper",
  "type": "registry:component",
  "title": "Vertical Stepper",
  "description": "A sidebar-style vertical layout: step rail on the left, long-form content on the right, collapsing to a compact nav on mobile.",
  "author": "Stepperize",
  "dependencies": [
    "@stepperize/react",
    "lucide-react"
  ],
  "registryDependencies": [],
  "categories": [
    "layouts"
  ],
  "meta": {
    "capabilities": [
      "navigation"
    ],
    "level": "beginner",
    "tags": [
      "vertical",
      "sidebar",
      "rail",
      "responsive"
    ]
  },
  "files": [
    {
      "path": "components/stepperize/vertical-stepper.tsx",
      "type": "registry:component",
      "target": "components/stepperize/vertical-stepper.tsx",
      "content": "\"use client\";\n\nimport { defineStepper } from \"@stepperize/react\";\nimport { Check } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst { Stepper } = defineStepper([\n  { id: \"profile\", title: \"Profile\", description: \"Tell us about you\" },\n  { id: \"workspace\", title: \"Workspace\", description: \"Name your workspace\" },\n  { id: \"billing\", title: \"Billing\", description: \"Add a payment method\" },\n  { id: \"review\", title: \"Review\", description: \"Confirm and finish\" },\n]);\n\nexport function VerticalStepperBlock() {\n  const [finished, setFinished] = useState(false);\n\n  return (\n    <Stepper.Root\n      orientation=\"vertical\"\n      className=\"w-full max-w-2xl rounded-xl border bg-background p-6 shadow-sm\"\n    >\n      {({ stepper }) => (\n        <div className=\"flex flex-col gap-6 sm:flex-row sm:gap-8\">\n          {/* Sidebar rail — vertical step navigation */}\n          <Stepper.List\n            orientation=\"vertical\"\n            className=\"flex shrink-0 flex-col sm:w-48\"\n          >\n            <Stepper.Items>\n              {(step, index) => (\n                <Stepper.Item\n                  key={step.id}\n                  step={step.id}\n                  className=\"group/item relative pb-6 pl-9 last:pb-0\"\n                >\n                  {index < stepper.count - 1 && (\n                    <div className=\"absolute top-7 bottom-1 left-3.25 w-px bg-border group-data-[status=previous]/item:bg-primary\" />\n                  )}\n                  <Stepper.Trigger className=\"flex items-start gap-3 text-left\">\n                    <Stepper.Indicator className=\"group absolute left-0 grid size-7 place-items-center rounded-full border bg-background text-xs font-semibold transition-colors data-[status=active]:border-primary data-[status=active]:bg-primary data-[status=active]:text-primary-foreground data-[status=previous]:border-primary data-[status=previous]:bg-primary data-[status=previous]:text-primary-foreground data-[status=upcoming]:border-border data-[status=upcoming]:text-muted-foreground\">\n                      <span className=\"group-data-[status=previous]:hidden\">\n                        {index + 1}\n                      </span>\n                      <Check className=\"hidden size-3.5 group-data-[status=previous]:block\" />\n                    </Stepper.Indicator>\n                    <span>\n                      <Stepper.Title className=\"block text-sm font-medium leading-none\" />\n                      <Stepper.Description className=\"mt-1 block text-xs text-muted-foreground\" />\n                    </span>\n                  </Stepper.Trigger>\n                </Stepper.Item>\n              )}\n            </Stepper.Items>\n          </Stepper.List>\n\n          {/* Long-form content panel */}\n          <div className=\"min-w-0 flex-1\">\n            <p className=\"text-xs font-medium text-muted-foreground\">\n              Step {stepper.index + 1} of {stepper.count}\n            </p>\n            <h3 className=\"mt-1 text-lg font-semibold\">\n              {finished ? \"Setup finished\" : stepper.current.title}\n            </h3>\n            <p className=\"mt-1 text-sm text-muted-foreground\">\n              {finished\n                ? \"Profile, workspace, billing, and review are complete.\"\n                : stepper.current.description}\n            </p>\n\n            <div className=\"mt-4 rounded-lg border bg-muted/30 p-4 text-sm text-muted-foreground\">\n              {finished\n                ? \"The completion state keeps the user oriented after the final action.\"\n                : `Put the ${stepper.current.title.toLowerCase()} fields here. The rail stays fixed while this column scrolls independently on long forms.`}\n            </div>\n\n            <Stepper.Actions className=\"mt-6 flex gap-2\">\n              <Stepper.Prev className=\"inline-flex h-9 items-center rounded-lg border bg-background px-4 text-sm font-medium transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50\">\n                Back\n              </Stepper.Prev>\n\t\t\t\t\t\t\t{finished ? (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetFinished(false);\n\t\t\t\t\t\t\t\t\t\tstepper.reset();\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tclassName=\"inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tRestart flow\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t) : stepper.isLast ? (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tonClick={() => setFinished(true)}\n                  className=\"inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90\"\n                >\n                  Finish setup\n                </button>\n              ) : (\n                <Stepper.Next className=\"inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50\">\n                  Continue\n                </Stepper.Next>\n              )}\n            </Stepper.Actions>\n          </div>\n        </div>\n      )}\n    </Stepper.Root>\n  );\n}\n\nexport default VerticalStepperBlock;\n"
    }
  ]
}