{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding-4",
  "title": "First-Run Welcome Screen",
  "description": "First-run onboarding empty state with a layered rocket illustration, welcome badge, create-project button, take-the-tour action, and reassurance hints.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/onboarding/4/onboarding-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\nconst hints = [\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Flashlight\"\n        tabler=\"IconBulb\"\n        hugeicons=\"FlashlightIcon\"\n        phosphor=\"Flashlight\"\n        remixicon=\"RiFlashlightLine\"\n        {...p}\n      />\n    ),\n    label: \"Set up in under two minutes\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Sparkles\"\n        tabler=\"IconSparkles\"\n        hugeicons=\"SparklesIcon\"\n        phosphor=\"Sparkle\"\n        remixicon=\"RiSparkling2Line\"\n        {...p}\n      />\n    ),\n    label: \"Invite your team anytime\",\n  },\n]\n\nexport default function OnboardingBlock() {\n  return (\n    <section className=\"flex min-h-svh w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"flex w-full max-w-md flex-col items-center text-center\">\n        <div className=\"relative flex size-20 items-center justify-center\">\n          <div\n            className=\"absolute inset-0 rounded-lg border border-border bg-muted\"\n            aria-hidden=\"true\"\n          />\n          <div\n            className=\"absolute inset-1 rounded-md border border-border bg-background\"\n            aria-hidden=\"true\"\n          />\n          <IconPlaceholder\n            lucide=\"Rocket\"\n            tabler=\"IconRocket\"\n            hugeicons=\"RocketIcon\"\n            phosphor=\"Rocket\"\n            remixicon=\"RiRocket2Line\"\n            className=\"relative size-8 text-foreground\"\n            aria-hidden=\"true\"\n          />\n        </div>\n\n        <Badge variant=\"secondary\" className=\"mt-6\">\n          Welcome\n        </Badge>\n        <h1 className=\"mt-4 font-heading text-2xl font-bold tracking-tight text-balance sm:text-3xl\">\n          Let us get your workspace set up\n        </h1>\n        <p className=\"mt-3 text-pretty text-muted-foreground\">\n          You are a few steps away from your first project. Create one now or\n          take a quick tour to see how everything fits together.\n        </p>\n\n        <div className=\"mt-8 flex w-full flex-col gap-3 sm:flex-row sm:justify-center\">\n          <Button size=\"lg\">\n            Create Your First Project\n            <IconPlaceholder\n              lucide=\"ArrowRight\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRightIcon\"\n              phosphor=\"ArrowRight\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BookOpen\"\n              tabler=\"IconBook2\"\n              hugeicons=\"BookOpenIcon\"\n              phosphor=\"BookOpen\"\n              remixicon=\"RiBookOpenLine\"\n              data-icon=\"inline-start\"\n              aria-hidden=\"true\"\n            />\n            Take The Tour\n          </Button>\n        </div>\n\n        <div className=\"mt-8 flex flex-wrap items-center justify-center gap-x-5 gap-y-2\">\n          {hints.map((hint) => (\n            <span\n              key={hint.label}\n              className=\"flex items-center gap-2 text-xs text-muted-foreground\"\n            >\n              <hint.icon className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n              {hint.label}\n            </span>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/onboarding-4.tsx"
    }
  ],
  "meta": {
    "height": "488px",
    "tier": "free"
  },
  "categories": [
    "onboarding"
  ],
  "type": "registry:block"
}