Astro Empty Component

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

---
import ArrowUpRightIcon from "@lucide/astro/icons/arrow-up-right"

import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
---

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="tabler-icon tabler-icon-folder-code"
      >
        <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v4"></path>
        <path d="M20 21l2 -2l-2 -2"></path>
        <path d="M17 17l-2 2l2 2"></path>
      </svg>
    </EmptyMedia>
    <EmptyTitle>No Projects Yet</EmptyTitle>
    <EmptyDescription>
      You haven&apos;t created any projects yet. Get started by creating your
      first project.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent class="flex-row justify-center gap-2">
    <Button>Create Project</Button>
    <Button variant="outline">Import Project</Button>
  </EmptyContent>
  <Button
    as="a"
    variant="link"
    href="#"
    class="text-muted-foreground"
    size="sm"
  >
    Learn More <ArrowUpRightIcon />
  </Button>
</Empty>

Installation

npx shadcn@latest add @fulldev/empty

Usage

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

---
import InboxIcon from "@lucide/astro/icons/inbox"

import { Button } from "@/components/ui/button"
---

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <InboxIcon />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>

Composition

Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent

Outline

Use the border utility class to create an outline empty state.

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

---
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
---

<Empty class="border border-dashed">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="tabler-icon tabler-icon-cloud"
      >
        <path d="M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878"></path>
      </svg>
    </EmptyMedia>
    <EmptyTitle>Cloud Storage Empty</EmptyTitle>
    <EmptyDescription>
      Upload files to your cloud storage to access them anywhere.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="outline" size="sm">
      Upload Files
    </Button>
  </EmptyContent>
</Empty>

Background

Use the bg-* and bg-gradient-* utilities to add a background.

No Notifications

You're all caught up. New notifications will appear here.

---
import RefreshCcwIcon from "@lucide/astro/icons/refresh-ccw"

import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
---

<Empty class="h-full bg-muted/30">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="tabler-icon tabler-icon-bell"
      >
        <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path>
        <path d="M9 17v1a3 3 0 0 0 6 0v-1"></path>
      </svg>
    </EmptyMedia>
    <EmptyTitle>No Notifications</EmptyTitle>
    <EmptyDescription class="max-w-xs text-pretty">
      You&apos;re all caught up. New notifications will appear here.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="outline">
      <RefreshCcwIcon data-icon="inline-start" />
      Refresh
    </Button>
  </EmptyContent>
</Empty>

Avatar

Put an Avatar in EmptyMedia.

User Offline

This user is currently offline. You can leave a message to notify them or try again later.

---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
---

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="default">
      <Avatar class="size-12">
        <AvatarImage src="https://github.com/shadcn.png" class="grayscale" />
        <AvatarFallback>LR</AvatarFallback>
      </Avatar>
    </EmptyMedia>
    <EmptyTitle>User Offline</EmptyTitle>
    <EmptyDescription>
      This user is currently offline. You can leave a message to notify them or
      try again later.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">Leave Message</Button>
  </EmptyContent>
</Empty>

Avatar Group

Put a group of avatars in EmptyMedia.

No Team Members

Invite your team to collaborate on this project.

---
import PlusIcon from "@lucide/astro/icons/plus"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
---

<Empty>
  <EmptyHeader>
    <EmptyMedia>
      <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">
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/maxleiter.png"
            alt="@maxleiter"
          />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </div>
    </EmptyMedia>
    <EmptyTitle>No Team Members</EmptyTitle>
    <EmptyDescription>
      Invite your team to collaborate on this project.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">
      <PlusIcon />
      Invite Members
    </Button>
  </EmptyContent>
</Empty>

InputGroup

Put an InputGroup in EmptyContent.

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

---
import SearchIcon from "@lucide/astro/icons/search"

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "@/components/ui/empty"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
import { Kbd } from "@/components/ui/kbd"
---

<Empty>
  <EmptyHeader>
    <EmptyTitle>404 - Not Found</EmptyTitle>
    <EmptyDescription>
      The page you&apos;re looking for doesn&apos;t exist. Try searching for
      what you need below.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <InputGroup class="sm:w-3/4">
      <InputGroupInput placeholder="Try searching for pages..." />
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <Kbd>/</Kbd>
      </InputGroupAddon>
    </InputGroup>
    <EmptyDescription>
      Need help? <a href="#">Contact support</a>
    </EmptyDescription>
  </EmptyContent>
</Empty>

RTL

لا توجد مشاريع بعد

لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.

تعرف على المزيد

---
import ArrowUpRightIcon from "@lucide/astro/icons/arrow-up-right"

import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

const translations = {
  en: {
    dir: "ltr",
    values: {
      title: "No Projects Yet",
      description:
        "You haven't created any projects yet. Get started by creating your first project.",
      createProject: "Create Project",
      importProject: "Import Project",
      learnMore: "Learn More",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      title: "لا توجد مشاريع بعد",
      description: "لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.",
      createProject: "إنشاء مشروع",
      importProject: "استيراد مشروع",
      learnMore: "تعرف على المزيد",
    },
  },
  he: {
    dir: "rtl",
    values: {
      title: "אין פרויקטים עדיין",
      description:
        "עדיין לא יצרת פרויקטים. התחל על ידי יצירת הפרויקט הראשון שלך.",
      createProject: "צור פרויקט",
      importProject: "ייבא פרויקט",
      learnMore: "למד עוד",
    },
  },
} as const

const { dir, values: t } = translations.ar
---

<Empty dir={dir}>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="tabler-icon tabler-icon-folder-code"
      >
        <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v4"></path>
        <path d="M20 21l2 -2l-2 -2"></path>
        <path d="M17 17l-2 2l2 2"></path>
      </svg>
    </EmptyMedia>
    <EmptyTitle>{t.title}</EmptyTitle>
    <EmptyDescription>{t.description}</EmptyDescription>
  </EmptyHeader>
  <EmptyContent class="flex-row justify-center gap-2">
    <Button>{t.createProject}</Button>
    <Button variant="outline">{t.importProject}</Button>
  </EmptyContent>
  <Button
    as="a"
    variant="link"
    href="#"
    class="text-muted-foreground"
    size="sm"
  >
    {t.learnMore}
    <ArrowUpRightIcon class="rtl:rotate-270" data-icon="inline-end" />
  </Button>
</Empty>

API Reference

Source: src/components/ui/empty

Component	Data Slot	Props
`Empty`	`empty`	`class`
`EmptyHeader`	`empty-header`	`class`
`EmptyMedia`	`empty-icon`	`variant`: `"default" \| "icon"` (`"default"`)
`EmptyTitle`	`empty-title`	`class`
`EmptyDescription`	`empty-description`	`class`
`EmptyContent`	`empty-content`	`class`

Menu