{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-stepper-5","type":"registry:block","title":"Stepper with title and indicator","description":"Stepper with title and indicator","dependencies":[],"registryDependencies":["@reui/stepper"],"files":[{"path":"c-stepper-5.tsx","type":"registry:block","content":"\"use client\"\n\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 { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst steps = [{ title: \"Step 1\" }, { title: \"Step 2\" }, { title: \"Step 3\" }]\n\nexport function Pattern() {\n  return (\n    <Stepper\n      className=\"w-full max-w-md space-y-8\"\n      defaultValue={2}\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 flex-1 items-start\"\n          >\n            <StepperTrigger className=\"flex flex-col gap-2.5\">\n              <StepperIndicator>{index + 1}</StepperIndicator>\n              <StepperTitle>{step.title}</StepperTitle>\n            </StepperTrigger>\n\n            {steps.length > index + 1 && (\n              <StepperSeparator className=\"group-data-[state=completed]/step:bg-primary absolute inset-x-0 top-3 left-[calc(50%+0.875rem)] m-0 group-data-[orientation=horizontal]/stepper-nav:w-[calc(100%-2rem+0.225rem)] group-data-[orientation=horizontal]/stepper-nav:flex-none\" />\n            )}\n          </StepperItem>\n        ))}\n      </StepperNav>\n\n      <StepperPanel className=\"text-sm\">\n        {steps.map((step, index) => (\n          <StepperContent\n            key={index}\n            value={index + 1}\n            className=\"flex items-center justify-center\"\n          >\n            Step {step.title} content\n          </StepperContent>\n        ))}\n      </StepperPanel>\n    </Stepper>\n  )\n}","target":"components/examples/c-stepper-5.tsx"}],"meta":{"order":5,"gridSize":1,"label":"Labels Below"}}