{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-stepper-13","type":"registry:block","title":"Stepper with vertical orientation and descriptions","description":"Stepper with vertical orientation and descriptions","dependencies":[],"registryDependencies":["@reui/stepper"],"files":[{"path":"c-stepper-13.tsx","type":"registry:block","content":"\"use client\"\n\nimport {\n  Stepper,\n  StepperContent,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperNav,\n  StepperPanel,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/components/reui/stepper\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst steps = [\n  { title: \"Account\", description: \"Create your account\" },\n  { title: \"Profile\", description: \"Set up your profile\" },\n  { title: \"Review\", description: \"Confirm your details\" },\n]\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, index) => (\n            <StepperItem\n              key={index}\n              step={index + 1}\n              className=\"relative items-start not-last:flex-1\"\n            >\n              <StepperTrigger className=\"items-start gap-2.5 pb-12 last:pb-0\">\n                <StepperIndicator className=\"data-[state=completed]:bg-success data-[state=completed]:text-white\">\n                  {index + 1}\n                </StepperIndicator>\n                <div className=\"mt-0.5 text-left\">\n                  <StepperTitle>{step.title}</StepperTitle>\n                  <StepperDescription>{step.description}</StepperDescription>\n                </div>\n              </StepperTrigger>\n              {index < steps.length - 1 && (\n                <StepperSeparator className=\"group-data-[state=completed]/step:bg-success absolute inset-y-0 top-7 left-3 -order-1 m-0 -translate-x-1/2 group-data-[orientation=vertical]/stepper-nav:h-[calc(100%-2rem)]\" />\n              )}\n            </StepperItem>\n          ))}\n        </StepperNav>\n\n        <StepperPanel className=\"w-56 text-center text-sm\">\n          {steps.map((step, index) => (\n            <StepperContent key={index} value={index + 1}>\n              {step.title} content\n            </StepperContent>\n          ))}\n        </StepperPanel>\n      </Stepper>\n    </div>\n  )\n}","target":"components/examples/c-stepper-13.tsx"}],"meta":{"order":13,"gridSize":1}}