{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "steps-2",
  "title": "Vertical Stepper With Descriptions",
  "description": "Vertical stepper on a connecting rail where each step shows a title and description across completed, current, and upcoming states.",
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/blocks/steps/2/steps-block.tsx",
      "content": "import { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype Status = \"done\" | \"current\" | \"upcoming\"\n\nconst steps: { title: string; description: string; status: Status }[] = [\n  {\n    title: \"Create your account\",\n    description: \"Sign up with your email and choose a password.\",\n    status: \"done\",\n  },\n  {\n    title: \"Verify your email\",\n    description: \"Confirm your address from the link we sent you.\",\n    status: \"done\",\n  },\n  {\n    title: \"Set up your workspace\",\n    description: \"Name your workspace and pick a starting template.\",\n    status: \"current\",\n  },\n  {\n    title: \"Invite your team\",\n    description: \"Add teammates so you can start collaborating.\",\n    status: \"upcoming\",\n  },\n]\n\nexport default function StepsBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"w-full max-w-md\">\n        <ol className=\"flex flex-col\">\n          {steps.map((step, i) => {\n            const last = i === steps.length - 1\n            return (\n              <li\n                key={step.title}\n                aria-current={step.status === \"current\" ? \"step\" : undefined}\n                className=\"flex gap-4\"\n              >\n                <div className=\"flex flex-col items-center\">\n                  <span\n                    className={cn(\n                      \"flex size-8 shrink-0 items-center justify-center rounded-lg text-sm font-medium tabular-nums\",\n                      step.status === \"done\" &&\n                        \"bg-primary text-primary-foreground\",\n                      step.status === \"current\" &&\n                        \"border-2 border-primary bg-background text-primary\",\n                      step.status === \"upcoming\" &&\n                        \"border border-border bg-background text-muted-foreground\"\n                    )}\n                  >\n                    {step.status === \"done\" ? (\n                      <IconPlaceholder\n                        lucide=\"Check\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"Check\"\n                        remixicon=\"RiCheckLine\"\n                        className=\"size-4\"\n                        aria-hidden=\"true\"\n                      />\n                    ) : (\n                      i + 1\n                    )}\n                  </span>\n                  {!last && (\n                    <span\n                      aria-hidden=\"true\"\n                      className={cn(\n                        \"my-1 w-0.5 flex-1\",\n                        step.status === \"done\" ? \"bg-primary\" : \"bg-border\"\n                      )}\n                    />\n                  )}\n                </div>\n\n                <div className={cn(\"pt-1\", last ? \"pb-0\" : \"pb-8\")}>\n                  <h3\n                    className={cn(\n                      \"font-heading text-sm font-semibold\",\n                      step.status === \"upcoming\"\n                        ? \"text-muted-foreground\"\n                        : \"text-foreground\"\n                    )}\n                  >\n                    {step.title}\n                  </h3>\n                  <p className=\"mt-1 text-sm/relaxed text-muted-foreground\">\n                    {step.description}\n                  </p>\n                </div>\n              </li>\n            )\n          })}\n        </ol>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/steps-2.tsx"
    }
  ],
  "meta": {
    "height": "435px",
    "tier": "free"
  },
  "categories": [
    "steps"
  ],
  "type": "registry:block"
}