{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-states-5",
  "title": "First Project Prompt",
  "description": "First-run empty state prompting users to create their first project, with New Project and Import buttons and a three-tip getting-started row.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "empty"
  ],
  "files": [
    {
      "path": "registry/blocks/empty-states/5/empty-states-block.tsx",
      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\"\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 tips = [\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Upload\"\n        tabler=\"IconUpload\"\n        hugeicons=\"UploadIcon\"\n        phosphor=\"Upload\"\n        remixicon=\"RiUploadLine\"\n        {...p}\n      />\n    ),\n    label: \"Import from a file\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"BookOpen\"\n        tabler=\"IconBook2\"\n        hugeicons=\"BookOpenIcon\"\n        phosphor=\"BookOpen\"\n        remixicon=\"RiBookOpenLine\"\n        {...p}\n      />\n    ),\n    label: \"Start from a template\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Plus\"\n        tabler=\"IconPlus\"\n        hugeicons=\"Add01Icon\"\n        phosphor=\"Plus\"\n        remixicon=\"RiAddLine\"\n        {...p}\n      />\n    ),\n    label: \"Build from scratch\",\n  },\n]\n\nexport default function EmptyStatesBlock() {\n  return (\n    <section className=\"flex min-h-svh w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <Empty className=\"w-full max-w-md border border-dashed border-border py-14\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"Folder\"\n              tabler=\"IconFolder\"\n              hugeicons=\"FolderIcon\"\n              phosphor=\"Folder\"\n              remixicon=\"RiFolder3Line\"\n              aria-hidden=\"true\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Create your first project</EmptyTitle>\n          <EmptyDescription>\n            Projects keep your work organized. Create one to start adding tasks,\n            files, and teammates.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex flex-col gap-2 sm:flex-row\">\n            <Button>\n              <IconPlaceholder\n                lucide=\"Plus\"\n                tabler=\"IconPlus\"\n                hugeicons=\"Add01Icon\"\n                phosphor=\"Plus\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n                aria-hidden=\"true\"\n              />\n              New project\n            </Button>\n            <Button variant=\"outline\">Import</Button>\n          </div>\n          <div className=\"mx-auto mt-6 flex w-fit flex-col gap-2.5\">\n            {tips.map(({ icon: Icon, label }) => (\n              <span\n                key={label}\n                className=\"inline-flex items-center gap-2 text-xs text-muted-foreground\"\n              >\n                <Icon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n                {label}\n              </span>\n            ))}\n          </div>\n        </EmptyContent>\n      </Empty>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/empty-states-5.tsx"
    }
  ],
  "meta": {
    "height": "515px",
    "tier": "free"
  },
  "categories": [
    "empty-states"
  ],
  "type": "registry:block"
}