---
type: doc
title: Empty
description: Displays an empty state placeholder with optional media, title, and description.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/empty/empty-demo.astro"
---
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

```bash
npx shadcn@latest add @fulldev/empty
```

## Usage

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

```astro
---
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

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

## Outline

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

```astro title="src/components/examples/empty/empty-outline.astro"
---
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.

```astro title="src/components/examples/empty/empty-background.astro"
---
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`.

```astro title="src/components/examples/empty/empty-avatar.astro"
---
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`.

```astro title="src/components/examples/empty/empty-avatar-group.astro"
---
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`.

```astro title="src/components/examples/empty/empty-input-group.astro"
---
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

```astro title="src/components/examples/empty/empty-rtl.astro"
---
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`](https://github.com/fulldotdev/ui/tree/main/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`                                        |

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/empty-examples
```