{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-stepper-11","type":"registry:block","title":"Stepper with progress bar and titles","description":"Stepper with progress bar and titles","dependencies":[],"registryDependencies":["@reui/stepper"],"files":[{"path":"c-stepper-11.tsx","type":"registry:block","content":"\"use client\"\n\nimport {\n  Stepper,\n  StepperContent,\n  StepperIndicator,\n  StepperItem,\n  StepperNav,\n  StepperPanel,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/components/reui/stepper\"\n\nconst steps = [\n  { title: \"User Details\" },\n  { title: \"Payment Info\" },\n  { title: \"Auth OTP\" },\n  { title: \"Preview Form\" },\n]\n\nexport function Pattern() {\n  return (\n    <Stepper defaultValue={2} className=\"w-full max-w-lg space-y-8\">\n      <StepperNav className=\"mb-10 gap-5\">\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 grow flex-col items-start justify-center gap-3.5\">\n              <StepperIndicator className=\"bg-border data-[state=active]:bg-primary data-[state=completed]:bg-primary h-1 w-full rounded-full\">\n                <span className=\"sr-only\">{index + 1}</span>\n              </StepperIndicator>\n              <StepperTitle className=\"group-data-[state=inactive]/step:text-muted-foreground text-start font-semibold\">\n                {step.title}\n              </StepperTitle>\n            </StepperTrigger>\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.title} content\n          </StepperContent>\n        ))}\n      </StepperPanel>\n    </Stepper>\n  )\n}","target":"components/examples/c-stepper-11.tsx"}],"meta":{"order":11,"gridSize":1}}