{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works-10",
  "title": "Vertical icon list",
  "description": "4-step vertical checklist with lucide icons in bordered circles, a thin spine connector and generous left-aligned prose.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/how-it-works/how-it-works-10.tsx",
      "content": "import {\n  CheckCircle2,\n  Download,\n  Pencil,\n  Rocket,\n} from \"lucide-react\"\n\nconst steps = [\n  {\n    icon: CheckCircle2,\n    title: \"Browse the catalog\",\n    body: \"Filter by category. Preview every block in light and dark mode before committing.\",\n  },\n  {\n    icon: Download,\n    title: \"Install via shadcn CLI\",\n    body: \"One command pulls the source file and any required primitives directly into your project.\",\n  },\n  {\n    icon: Pencil,\n    title: \"Edit what you own\",\n    body: \"The block is a plain .tsx file. Rename variables, swap tokens, refactor freely — no hidden runtime.\",\n  },\n  {\n    icon: Rocket,\n    title: \"Deploy\",\n    body: \"Push to production. Styles, dark mode and accessibility are pre-wired and ready.\",\n  },\n]\n\nexport default function HowItWorks10() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-2xl px-6 sm:px-10\">\n        <div className=\"mb-12 flex flex-col gap-2\">\n          <span className=\"text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground\">\n            How it works\n          </span>\n          <h2\n            className=\"text-balance font-semibold tracking-tight text-foreground\"\n            style={{ fontSize: \"clamp(1.85rem, 4vw, 2.75rem)\", letterSpacing: \"-0.03em\" }}\n          >\n            From catalog to production\n          </h2>\n        </div>\n\n        <ol className=\"flex flex-col gap-0\">\n          {steps.map((step, i) => {\n            const Icon = step.icon\n            return (\n              <li key={step.title} className=\"relative flex gap-5\">\n                {/* vertical connector */}\n                {i < steps.length - 1 && (\n                  <div className=\"absolute left-5 top-10 h-full w-px -translate-x-1/2 bg-border\" />\n                )}\n                <div className=\"relative z-10 mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-full border border-border bg-card\">\n                  <Icon className=\"size-4 text-foreground\" strokeWidth={1.5} />\n                </div>\n                <div className=\"pb-10\">\n                  <h3 className=\"font-semibold tracking-tight text-foreground\">{step.title}</h3>\n                  <p className=\"mt-1 text-sm leading-relaxed text-muted-foreground\">{step.body}</p>\n                </div>\n              </li>\n            )\n          })}\n        </ol>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/how-it-works-10.tsx"
    }
  ],
  "categories": [
    "how-it-works"
  ],
  "type": "registry:block"
}