{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-stepper-1","type":"registry:block","title":"Basic stepper","description":"Basic stepper","dependencies":[],"registryDependencies":["@reui/stepper"],"files":[{"path":"c-stepper-1.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\nconst steps = [1, 2, 3, 4]\n\nexport function Pattern() {\n  return (\n    <Stepper defaultValue={2} className=\"w-full max-w-md space-y-8\">\n      <StepperNav>\n        {steps.map((step) => (\n          <StepperItem key={step} step={step}>\n            <StepperTrigger>\n              <StepperIndicator>{step}</StepperIndicator>\n            </StepperTrigger>\n            {steps.length > step && (\n              <StepperSeparator className=\"group-data-[state=completed]/step:bg-primary\" />\n            )}\n          </StepperItem>\n        ))}\n      </StepperNav>\n\n      <StepperPanel className=\"text-sm\">\n        {steps.map((step) => (\n          <StepperContent\n            key={step}\n            value={step}\n            className=\"flex items-center justify-center\"\n          >\n            Step {step} content\n          </StepperContent>\n        ))}\n      </StepperPanel>\n    </Stepper>\n  )\n}","target":"components/examples/c-stepper-1.tsx"}],"meta":{"order":1,"gridSize":1}}