{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-stepper-15","type":"registry:block","title":"Stepper with vertical orientation and titles","description":"Stepper with vertical orientation and titles","dependencies":[],"registryDependencies":["button","@reui/stepper"],"files":[{"path":"c-stepper-15.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useRef, useState } from \"react\"\nimport {\n  Stepper,\n  StepperContent,\n  StepperIndicator,\n  StepperItem,\n  StepperNav,\n  StepperPanel,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/components/reui/stepper\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst steps = [{ title: \"Account\" }, { title: \"Profile\" }, { title: \"Review\" }]\n\nexport function Pattern() {\n  const [current, setCurrent] = useState(2)\n  const prevRef = useRef<HTMLButtonElement>(null)\n  const nextRef = useRef<HTMLButtonElement>(null)\n  // One past the last step marks every step complete. No tab is selected\n  // then, so the last one keeps the tablist's tab stop.\n  const allDone = current > steps.length\n\n  function goTo(step: number) {\n    setCurrent(step)\n    // The pressed button disables itself at either end, so focus moves to its partner.\n    if (step === 1) nextRef.current?.focus()\n    if (step > steps.length) prevRef.current?.focus()\n  }\n\n  return (\n    <div className=\"flex items-center justify-center\">\n      <Stepper\n        className=\"flex flex-col items-center justify-center gap-10\"\n        value={current}\n        onValueChange={setCurrent}\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\n                tabIndex={allDone && index === steps.length - 1 ? 0 : undefined}\n                className=\"items-start gap-2.5 pb-12 last:pb-0\"\n              >\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                </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          <StepperContent value={steps.length + 1}>\n            All steps complete\n          </StepperContent>\n          <div className=\"mt-3 flex justify-center gap-2\">\n            <Button\n              ref={prevRef}\n              variant=\"outline\"\n              size=\"sm\"\n              disabled={current === 1}\n              onClick={() => goTo(current - 1)}\n            >\n              Previous\n            </Button>\n            <Button\n              ref={nextRef}\n              variant=\"outline\"\n              size=\"sm\"\n              disabled={allDone}\n              onClick={() => goTo(current + 1)}\n            >\n              Next\n            </Button>\n          </div>\n        </StepperPanel>\n      </Stepper>\n    </div>\n  )\n}","target":"components/examples/c-stepper-15.tsx"}],"meta":{"order":15,"gridSize":1,"label":"Vertical Titles"}}