{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-states-2",
  "title": "Illustrated Inbox Panel",
  "description": "Empty inbox panel with a framed inbox illustration, a create-workspace dialog with a name field, a Learn More link, and a support footer.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "dialog",
    "empty",
    "field",
    "input",
    "separator",
    "sonner"
  ],
  "files": [
    {
      "path": "registry/blocks/empty-states/2/empty-states-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/components/ui/empty\"\nimport { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Toaster } from \"@/components/ui/sonner\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nexport default function EmptyStatesBlock() {\n  const [open, setOpen] = useState(false)\n  const [name, setName] = useState(\"\")\n\n  function handleCreate(e: React.FormEvent) {\n    e.preventDefault()\n    const trimmed = name.trim()\n    if (!trimmed) return\n    toast.success(`Workspace \"${trimmed}\" created`, {\n      id: \"workspace-created\",\n      description: \"Invite your team to start collaborating.\",\n    })\n    setOpen(false)\n    setName(\"\")\n  }\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <Toaster />\n      <div className=\"w-full max-w-lg overflow-hidden rounded-lg border border-border bg-card\">\n        <div className=\"flex items-center justify-center border-b border-border bg-muted px-8 py-12\">\n          <div className=\"relative flex size-20 items-center justify-center\">\n            <div className=\"absolute inset-0 rounded-lg border border-border bg-background\" />\n            <div className=\"absolute inset-2 rounded-md border border-border bg-card\" />\n            <IconPlaceholder\n              lucide=\"Inbox\"\n              tabler=\"IconInbox\"\n              hugeicons=\"InboxIcon\"\n              phosphor=\"Tray\"\n              remixicon=\"RiInboxLine\"\n              className=\"relative size-8 text-foreground\"\n            />\n          </div>\n        </div>\n\n        <Empty className=\"border-0 px-8 py-8\">\n          <EmptyHeader>\n            <EmptyTitle className=\"text-base font-semibold\">\n              Your inbox is empty\n            </EmptyTitle>\n            <EmptyDescription className=\"max-w-xs text-sm/relaxed\">\n              Messages and notifications from your Acme workspace will appear\n              here once your team starts collaborating.\n            </EmptyDescription>\n          </EmptyHeader>\n\n          <EmptyContent>\n            <div className=\"flex w-full max-w-xs flex-col items-stretch gap-3 sm:flex-row sm:justify-center\">\n              <Dialog open={open} onOpenChange={setOpen}>\n                <DialogTrigger\n                  render={<Button size=\"default\" className=\"sm:flex-1\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"Plus\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"Add01Icon\"\n                    phosphor=\"Plus\"\n                    remixicon=\"RiAddLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Create A Workspace\n                </DialogTrigger>\n                <DialogContent>\n                  <form onSubmit={handleCreate}>\n                    <DialogHeader>\n                      <DialogTitle>Create a workspace</DialogTitle>\n                      <DialogDescription>\n                        Workspaces keep your projects, messages, and team in one\n                        place.\n                      </DialogDescription>\n                    </DialogHeader>\n\n                    <Field className=\"my-4\">\n                      <FieldLabel htmlFor=\"workspace-name\">\n                        Workspace name\n                      </FieldLabel>\n                      <Input\n                        id=\"workspace-name\"\n                        value={name}\n                        onChange={(e) => setName(e.target.value)}\n                        placeholder=\"Acme Inc.\"\n                        autoFocus\n                      />\n                      <FieldDescription>\n                        You can rename this later in settings.\n                      </FieldDescription>\n                    </Field>\n\n                    <DialogFooter>\n                      <DialogClose render={<Button variant=\"outline\" />}>\n                        Cancel\n                      </DialogClose>\n                      <Button type=\"submit\" disabled={!name.trim()}>\n                        Create Workspace\n                      </Button>\n                    </DialogFooter>\n                  </form>\n                </DialogContent>\n              </Dialog>\n              <Button\n                nativeButton={false}\n                variant=\"outline\"\n                size=\"default\"\n                className=\"sm:flex-1\"\n                render={<a href=\"#\" />}\n              >\n                Learn More\n              </Button>\n            </div>\n            <Separator className=\"my-1 w-full max-w-xs\" />\n            <p className=\"text-xs text-muted-foreground\">\n              Need help?{\" \"}\n              <a\n                href=\"#\"\n                className=\"underline underline-offset-4 hover:text-foreground\"\n              >\n                Contact Acme Support\n              </a>\n            </p>\n          </EmptyContent>\n        </Empty>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/empty-states-2.tsx"
    }
  ],
  "meta": {
    "height": "540px",
    "tier": "free"
  },
  "docs": "Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.",
  "categories": [
    "empty-states"
  ],
  "type": "registry:block"
}