empty-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-example",
  "title": "Empty",
  "registryDependencies": [
    "button",
    "empty",
    "input-group",
    "kbd",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-lyra/examples/empty-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-lyra/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { Kbd } from \"@/registry/base-lyra/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n                remixicon=\"RiLoaderLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n                remixicon=\"RiLoaderLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}