{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "setup-guide-03",
  "title": "Setup Guide 03",
  "description": "A simple setup guide block",
  "files": [
    {
      "path": "src/registry/blocks/radix/setup-guide-03/components/setup-guide.tsx",
      "content": "import { CheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\n\nexport default function SetupGuide() {\n  return (\n    <div className=\"mx-auto max-w-(--breakpoint-md) px-6 py-10 sm:py-16\">\n      <h2 className=\"font-medium text-2xl tracking-tight sm:text-3xl\">\n        Start tracking product usage\n      </h2>\n      <p className=\"mt-2 text-muted-foreground sm:text-lg\">\n        Send clean events before your team builds its first dashboard.\n      </p>\n\n      <div className=\"mt-6 flex flex-col divide-y overflow-hidden rounded-xl border bg-card shadow-lg/[0.03]\">\n        {setupGuideSteps.map((step, index) => (\n          <div\n            className={cn(\n              \"relative isolate flex items-center gap-5 px-6 py-4 sm:px-8\",\n              {\n                \"bg-primary/8\": step.status === \"completed\",\n                \"cursor-pointer transition-colors hover:bg-muted/50\":\n                  step.status === \"pending\",\n              }\n            )}\n            key={step.title}\n          >\n            {/* Decorative line */}\n            <div className=\"absolute inset-y-0 -z-1 translate-x-4 border-r border-dashed\" />\n\n            <div\n              className={cn(\n                \"flex size-8 shrink-0 items-center justify-center rounded-full bg-muted\",\n                {\n                  \"bg-primary\": step.status === \"completed\",\n                  \"border border-dashed\": step.status === \"pending\",\n                }\n              )}\n            >\n              {step.status === \"completed\" ? (\n                <CheckIcon className=\"size-4 text-primary-foreground\" />\n              ) : (\n                index + 1\n              )}\n            </div>\n\n            <div className=\"flex grow flex-col justify-between gap-3 sm:flex-row sm:items-center sm:gap-5\">\n              <div className=\"flex-1\">\n                <h3 className=\"text-pretty font-medium sm:text-lg\">\n                  {step.title}\n                </h3>\n                <p className=\"text-pretty text-muted-foreground text-sm sm:text-base\">\n                  {step.description}\n                </p>\n              </div>\n\n              <div className=\"leading-none\">\n                {step.status === \"completed\" && <Badge>Completed</Badge>}\n                {step.status === \"pending\" && (\n                  <Button className=\"-ml-2.5 sm:ml-0\" size=\"sm\" variant=\"ghost\">\n                    Start <ChevronRightIcon />\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nconst setupGuideSteps = [\n  {\n    title: \"Create a production source\",\n    description: \"Choose the web or mobile SDK that matches your product.\",\n    time: \"1 minute\",\n    status: \"completed\",\n  },\n  {\n    title: \"Install the tracking snippet\",\n    description: \"Add the SDK to your app and confirm the first page view.\",\n    time: \"5 minutes\",\n    status: \"pending\",\n  },\n  {\n    title: \"Identify signed-in users\",\n    description: \"Attach your internal user ID after authentication.\",\n    time: \"4 minutes\",\n    status: \"pending\",\n  },\n  {\n    title: \"Capture subscription events\",\n    description: \"Track upgrades, renewals, and cancellations from billing.\",\n    time: \"5 minutes\",\n    status: \"pending\",\n  },\n  {\n    title: \"Invite the product team\",\n    description: \"Give teammates access to reports and saved queries.\",\n    time: \"2 minutes\",\n    status: \"pending\",\n  },\n];\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}