{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-stepper-14","type":"registry:block","title":"Stepper with vertical orientation","description":"Stepper with vertical orientation","dependencies":[],"registryDependencies":["@reui/stepper"],"files":[{"path":"c-stepper-14.tsx","type":"registry:block","content":"\"use client\"\n\nimport {\n  Stepper,\n  StepperContent,\n  StepperIndicator,\n  StepperItem,\n  StepperNav,\n  StepperPanel,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/components/reui/stepper\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst steps = [1, 2, 3]\n\nexport function Pattern() {\n  return (\n    <div className=\"flex items-center justify-center\">\n      <Stepper\n        className=\"flex flex-col items-center justify-center gap-10\"\n        defaultValue={2}\n        orientation=\"vertical\"\n        indicators={{\n          completed: (\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n              className=\"size-3.5\"\n            />\n          ),\n          loading: (\n            <IconPlaceholder\n              lucide=\"LoaderCircleIcon\"\n              tabler=\"IconLoader2\"\n              hugeicons=\"Loading02Icon\"\n              phosphor=\"CircleNotchIcon\"\n              remixicon=\"RiLoader4Line\"\n              className=\"size-3.5 animate-spin\"\n            />\n          ),\n        }}\n      >\n        <StepperNav>\n          {steps.map((step) => (\n            <StepperItem key={step} step={step} loading={step === 2}>\n              <StepperTrigger>\n                <StepperIndicator className=\"data-[state=completed]:bg-success data-[state=completed]:text-white\">\n                  {step}\n                </StepperIndicator>\n              </StepperTrigger>\n              {steps.length > step && (\n                <StepperSeparator className=\"group-data-[state=completed]/step:bg-success\" />\n              )}\n            </StepperItem>\n          ))}\n        </StepperNav>\n\n        <StepperPanel className=\"w-56 text-center text-sm\">\n          {steps.map((step) => (\n            <StepperContent key={step} value={step}>\n              Step {step} content\n            </StepperContent>\n          ))}\n        </StepperPanel>\n      </Stepper>\n    </div>\n  )\n}","target":"components/examples/c-stepper-14.tsx"}],"meta":{"order":14,"gridSize":1,"label":"Vertical"}}