{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-stepper-10","type":"registry:block","title":"Stepper with content for each step","description":"Stepper with content for each step","dependencies":[],"registryDependencies":["@reui/stepper"],"files":[{"path":"c-stepper-10.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: \"Step 1\", description: \"Description\" },\n  { title: \"Step 2\", description: \"Description\" },\n  { title: \"Step 3\", description: \"Description\" },\n]\n\nexport function Pattern() {\n  return (\n    <Stepper\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      className=\"w-full max-w-lg space-y-8\"\n    >\n      <StepperNav>\n        {steps.map((step, index) => (\n          <StepperItem key={index} step={index + 1} className=\"relative\">\n            <StepperTrigger className=\"flex justify-start gap-1.5\">\n              <StepperIndicator>{index + 1}</StepperIndicator>\n              <div className=\"flex flex-col items-start gap-0.5\">\n                <StepperTitle>{step.title}</StepperTitle>\n                <StepperDescription>{step.description}</StepperDescription>\n              </div>\n            </StepperTrigger>\n\n            {steps.length > index + 1 && (\n              <StepperSeparator className=\"md:mx-2.5\" />\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.title} content\n          </StepperContent>\n        ))}\n      </StepperPanel>\n    </Stepper>\n  )\n}","target":"components/examples/c-stepper-10.tsx"}],"meta":{"order":10,"gridSize":1}}