{"name":"empty","title":"Empty","description":"Use the Empty component to display an empty state.","installCommand":"bunx marko-ui add empty -y","usageTags":"<Empty>, <EmptyHeader>, <EmptyMedia>, <EmptyTitle>, <EmptyDescription>, <EmptyContent>","importSnippet":"import Empty from \"@/components/ui/empty/empty.marko\";\nimport EmptyHeader from \"@/components/ui/empty/header.marko\";\nimport EmptyMedia from \"@/components/ui/empty/media.marko\";\nimport EmptyTitle from \"@/components/ui/empty/title.marko\";\nimport EmptyDescription from \"@/components/ui/empty/description.marko\";\nimport EmptyContent from \"@/components/ui/empty/content.marko\";","usageSnippet":"<Empty>\n  <EmptyHeader>\n    <EmptyMedia variant=\"icon\">\n      <Icon name=\"InboxIcon\"/>\n    </EmptyMedia>\n    <EmptyTitle>No data</EmptyTitle>\n    <EmptyDescription>No data found</EmptyDescription>\n  </EmptyHeader>\n  <EmptyContent>\n    <Button>Add data</Button>\n  </EmptyContent>\n</Empty>","tags":["Empty","EmptyContent","EmptyDescription","EmptyHeader","EmptyMedia","EmptyTitle"],"parts":[],"props":[],"events":[],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"empty-demo","title":"Basic","source":"import Empty from \"@marko-ui/shadcn/ui/empty/empty.marko\";\nimport EmptyHeader from \"@marko-ui/shadcn/ui/empty/header.marko\";\nimport EmptyMedia from \"@marko-ui/shadcn/ui/empty/media.marko\";\nimport EmptyTitle from \"@marko-ui/shadcn/ui/empty/title.marko\";\nimport EmptyDescription from \"@marko-ui/shadcn/ui/empty/description.marko\";\nimport EmptyContent from \"@marko-ui/shadcn/ui/empty/content.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Empty>\n  <EmptyHeader>\n    <EmptyMedia variant=\"icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z\"/>\n        <path d=\"m9 13 2 2 4-4\"/>\n      </svg>\n    </EmptyMedia>\n    <EmptyTitle>No projects yet</EmptyTitle>\n    <EmptyDescription>\n      You haven't created any projects yet. Get started by creating your first project.\n    </EmptyDescription>\n  </EmptyHeader>\n  <EmptyContent>\n    <div class=\"flex gap-2\">\n      <Button type=\"button\">Create project</Button>\n      <Button type=\"button\" variant=\"outline\">Import project</Button>\n    </div>\n  </EmptyContent>\n</Empty>","description":"A header with icon, title, and description, plus content actions."},{"id":"empty-outline","title":"Outline","source":"import Empty from \"@marko-ui/shadcn/ui/empty/empty.marko\";\nimport EmptyHeader from \"@marko-ui/shadcn/ui/empty/header.marko\";\nimport EmptyMedia from \"@marko-ui/shadcn/ui/empty/media.marko\";\nimport EmptyTitle from \"@marko-ui/shadcn/ui/empty/title.marko\";\nimport EmptyDescription from \"@marko-ui/shadcn/ui/empty/description.marko\";\nimport EmptyContent from \"@marko-ui/shadcn/ui/empty/content.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Empty class=\"border border-dashed\">\n  <EmptyHeader>\n    <EmptyMedia variant=\"icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z\"/>\n      </svg>\n    </EmptyMedia>\n    <EmptyTitle>Cloud storage empty</EmptyTitle>\n    <EmptyDescription>Upload files to your cloud storage to access them anywhere.</EmptyDescription>\n  </EmptyHeader>\n  <EmptyContent>\n    <Button type=\"button\" variant=\"outline\" size=\"sm\">Upload files</Button>\n  </EmptyContent>\n</Empty>","description":"Use the `border` utility class to create an outline empty state."},{"id":"empty-background","title":"Background","source":"import Empty from \"@marko-ui/shadcn/ui/empty/empty.marko\";\nimport EmptyHeader from \"@marko-ui/shadcn/ui/empty/header.marko\";\nimport EmptyMedia from \"@marko-ui/shadcn/ui/empty/media.marko\";\nimport EmptyTitle from \"@marko-ui/shadcn/ui/empty/title.marko\";\nimport EmptyDescription from \"@marko-ui/shadcn/ui/empty/description.marko\";\nimport EmptyContent from \"@marko-ui/shadcn/ui/empty/content.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Empty class=\"h-full bg-gradient-to-b from-muted/50 from-30% to-background\">\n  <EmptyHeader>\n    <EmptyMedia variant=\"icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/>\n        <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/>\n      </svg>\n    </EmptyMedia>\n    <EmptyTitle>No notifications</EmptyTitle>\n    <EmptyDescription>You're all caught up. New notifications will appear here.</EmptyDescription>\n  </EmptyHeader>\n  <EmptyContent>\n    <Button type=\"button\" variant=\"outline\" size=\"sm\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\"/>\n        <path d=\"M21 3v5h-5\"/>\n        <path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\"/>\n        <path d=\"M8 16H3v5\"/>\n      </svg>\n      Refresh\n    </Button>\n  </EmptyContent>\n</Empty>","description":"Use `bg-*` and `bg-gradient-*` utilities to add a background to the empty state."},{"id":"empty-avatar","title":"Avatar","source":"import Empty from \"@marko-ui/shadcn/ui/empty/empty.marko\";\nimport EmptyHeader from \"@marko-ui/shadcn/ui/empty/header.marko\";\nimport EmptyMedia from \"@marko-ui/shadcn/ui/empty/media.marko\";\nimport EmptyTitle from \"@marko-ui/shadcn/ui/empty/title.marko\";\nimport EmptyDescription from \"@marko-ui/shadcn/ui/empty/description.marko\";\nimport EmptyContent from \"@marko-ui/shadcn/ui/empty/content.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\n\n<Empty>\n  <EmptyHeader>\n    <EmptyMedia>\n      <Avatar class=\"size-12\" src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"LR\"/>\n    </EmptyMedia>\n    <EmptyTitle>User offline</EmptyTitle>\n    <EmptyDescription>\n      This user is currently offline. You can leave a message to notify them or try again later.\n    </EmptyDescription>\n  </EmptyHeader>\n  <EmptyContent>\n    <Button type=\"button\" size=\"sm\">Leave message</Button>\n  </EmptyContent>\n</Empty>","description":"Use `EmptyMedia` with `variant=\"default\"` to display an avatar in the empty state."},{"id":"empty-avatar-group","title":"Avatar group","source":"import Empty from \"@marko-ui/shadcn/ui/empty/empty.marko\";\nimport EmptyHeader from \"@marko-ui/shadcn/ui/empty/header.marko\";\nimport EmptyMedia from \"@marko-ui/shadcn/ui/empty/media.marko\";\nimport EmptyTitle from \"@marko-ui/shadcn/ui/empty/title.marko\";\nimport EmptyDescription from \"@marko-ui/shadcn/ui/empty/description.marko\";\nimport EmptyContent from \"@marko-ui/shadcn/ui/empty/content.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\n\n<Empty>\n  <EmptyHeader>\n    <EmptyMedia>\n      <div class=\"flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale\">\n        <Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\"/>\n        <Avatar src=\"https://github.com/maxleiter.png\" alt=\"@maxleiter\" fallback=\"LR\"/>\n        <Avatar src=\"https://github.com/evilrabbit.png\" alt=\"@evilrabbit\" fallback=\"ER\"/>\n      </div>\n    </EmptyMedia>\n    <EmptyTitle>No team members</EmptyTitle>\n    <EmptyDescription>Invite your team to collaborate on this project.</EmptyDescription>\n  </EmptyHeader>\n  <EmptyContent>\n    <Button type=\"button\" size=\"sm\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M5 12h14M12 5v14\"/>\n      </svg>\n      Invite members\n    </Button>\n  </EmptyContent>\n</Empty>","description":"Use `EmptyMedia` to display an avatar group in the empty state."},{"id":"empty-input-group","title":"Input group","source":"import Empty from \"@marko-ui/shadcn/ui/empty/empty.marko\";\nimport EmptyHeader from \"@marko-ui/shadcn/ui/empty/header.marko\";\nimport EmptyTitle from \"@marko-ui/shadcn/ui/empty/title.marko\";\nimport EmptyDescription from \"@marko-ui/shadcn/ui/empty/description.marko\";\nimport EmptyContent from \"@marko-ui/shadcn/ui/empty/content.marko\";\nimport InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport Kbd from \"@marko-ui/shadcn/ui/kbd/kbd.marko\";\n\n<Empty>\n  <EmptyHeader>\n    <EmptyTitle>404 - Not found</EmptyTitle>\n    <EmptyDescription>The page you're looking for doesn't exist. Try searching for what you need below.</EmptyDescription>\n  </EmptyHeader>\n  <EmptyContent>\n    <InputGroup class=\"sm:w-3/4\">\n      <InputGroupInput placeholder=\"Try searching for pages...\"/>\n      <InputGroupAddon>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n          <path d=\"m21 21-4.3-4.3\"/>\n        </svg>\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>","description":"You can add an `InputGroup` component to the `EmptyContent` component."},{"id":"empty-icon","title":"Icon","source":"import Empty from \"@marko-ui/shadcn/ui/empty/empty.marko\";\nimport EmptyHeader from \"@marko-ui/shadcn/ui/empty/header.marko\";\nimport EmptyMedia from \"@marko-ui/shadcn/ui/empty/media.marko\";\nimport EmptyTitle from \"@marko-ui/shadcn/ui/empty/title.marko\";\nimport EmptyDescription from \"@marko-ui/shadcn/ui/empty/description.marko\";\n\n<div class=\"grid gap-8 md:grid-cols-2\">\n  <Empty>\n    <EmptyHeader>\n      <EmptyMedia variant=\"icon\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <polyline points=\"22 12 16 12 14 15 10 15 8 12 2 12\"/>\n          <path d=\"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z\"/>\n        </svg>\n      </EmptyMedia>\n      <EmptyTitle>No messages</EmptyTitle>\n      <EmptyDescription>Your inbox is empty. New messages will appear here.</EmptyDescription>\n    </EmptyHeader>\n  </Empty>\n\n  <Empty>\n    <EmptyHeader>\n      <EmptyMedia variant=\"icon\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\n        </svg>\n      </EmptyMedia>\n      <EmptyTitle>No favorites</EmptyTitle>\n      <EmptyDescription>Items you mark as favorites will appear here.</EmptyDescription>\n    </EmptyHeader>\n  </Empty>\n\n  <Empty>\n    <EmptyHeader>\n      <EmptyMedia variant=\"icon\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"/>\n        </svg>\n      </EmptyMedia>\n      <EmptyTitle>No likes yet</EmptyTitle>\n      <EmptyDescription>Content you like will be saved here for easy access.</EmptyDescription>\n    </EmptyHeader>\n  </Empty>\n\n  <Empty>\n    <EmptyHeader>\n      <EmptyMedia variant=\"icon\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z\"/>\n        </svg>\n      </EmptyMedia>\n      <EmptyTitle>No bookmarks</EmptyTitle>\n      <EmptyDescription>Save interesting content by bookmarking it.</EmptyDescription>\n    </EmptyHeader>\n  </Empty>\n</div>","description":"A grid of compact empty states, each with just an icon, title, and description."},{"id":"empty-rtl","title":"RTL","source":"import Empty from \"@marko-ui/shadcn/ui/empty/empty.marko\";\nimport EmptyHeader from \"@marko-ui/shadcn/ui/empty/header.marko\";\nimport EmptyMedia from \"@marko-ui/shadcn/ui/empty/media.marko\";\nimport EmptyTitle from \"@marko-ui/shadcn/ui/empty/title.marko\";\nimport EmptyDescription from \"@marko-ui/shadcn/ui/empty/description.marko\";\nimport EmptyContent from \"@marko-ui/shadcn/ui/empty/content.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport { buttonVariants } from \"@marko-ui/shadcn/ui/button/variants.ts\";\n\n<Empty dir=\"rtl\">\n  <EmptyHeader>\n    <EmptyMedia variant=\"icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z\"/>\n        <path d=\"m10 13-2 2 2 2\"/>\n        <path d=\"m14 17 2-2-2-2\"/>\n      </svg>\n    </EmptyMedia>\n    <EmptyTitle>لا توجد مشاريع بعد</EmptyTitle>\n    <EmptyDescription>لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.</EmptyDescription>\n  </EmptyHeader>\n  <EmptyContent class=\"flex-row justify-center gap-2\">\n    <Button type=\"button\">إنشاء مشروع</Button>\n    <Button type=\"button\" variant=\"outline\">استيراد مشروع</Button>\n  </EmptyContent>\n  <a href=\"#\" class=`${buttonVariants({ variant: \"link\", size: \"sm\" })} text-muted-foreground`>\n    تعرف على المزيد\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"rtl:rotate-270\">\n      <path d=\"M7 7h10v10\"/>\n      <path d=\"M7 17 17 7\"/>\n    </svg>\n  </a>\n</Empty>","description":"Empty and its parts restyle correctly for right-to-left layouts via `dir=\"rtl\"`."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","requires":["button","icon"],"nativeAttributes":"div","subcomponents":[{"name":"content","props":[],"nativeAttributes":"div"},{"name":"description","props":[],"nativeAttributes":"div"},{"name":"header","props":[],"nativeAttributes":"div"},{"name":"media","props":[{"name":"variant","type":"'default' | 'icon' | null | undefined","required":false,"default":"default"}],"nativeAttributes":"div"},{"name":"title","props":[],"nativeAttributes":"div"}]}