Empty

Use the Empty component to display an empty state.

Radix UI Base UI

No Projects Yet

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

Learn More

Dropdown Menu Field

On This Page

Installation Usage Examples Outline Background Avatar Avatar Group InputGroup API Reference Empty EmptyHeader EmptyMedia EmptyTitle EmptyDescription EmptyContent

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add empty

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

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

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

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

Use the EmptyMedia component to display an avatar in the empty state.

Use the EmptyMedia component to display an avatar group in the empty state.

You can add an InputGroup component to the EmptyContent component.

The main component of the empty state. Wraps the EmptyHeader and EmptyContent components.

Prop	Type	Default
`className`	`string`

<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>

The EmptyHeader component wraps the empty media, title, and description.

Prop	Type	Default
`className`	`string`

<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>

Use the EmptyMedia component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.

Prop	Type	Default
`variant`	`"default" \| "icon"`	`default`
`className`	`string`

<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>

<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>

Use the EmptyTitle component to display the title of the empty state.

Prop	Type	Default
`className`	`string`

<EmptyTitle>No data</EmptyTitle>

Use the EmptyDescription component to display the description of the empty state.

Prop	Type	Default
`className`	`string`

<EmptyDescription>You do not have any notifications.</EmptyDescription>

Use the EmptyContent component to display the content of the empty state such as a button, input or a link.

Prop	Type	Default
`className`	`string`

<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>

import { Button } from "@/components/ui/button"
import {
  Empty,

import { Button } from "@/components/ui/button"
import {
  Empty,

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

import {
  Empty,
  EmptyContent,

import { Button } from "@/components/ui/button"
import {
  Empty,