Empty

A composable empty state component for zero-data screens. It centers its content within a dashed-border container and provides slots for an icon or image, a title, a description, and action buttons.

No results found

There are no items to display. Try adjusting your filters or create a new item to get started.

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

export default function EmptyDemo() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <InboxIcon />
        </EmptyMedia>
        <EmptyTitle>No results found</EmptyTitle>
        <EmptyDescription>
          There are no items to display. Try adjusting your filters or create a
          new item to get started.
        </EmptyDescription>
      </EmptyHeader>
      <Button>Create item</Button>
    </Empty>
  )
}

Anatomy

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

<Empty>
  <EmptyHeader>
    <EmptyMedia>
      <InboxIcon />
    </EmptyMedia>
    <EmptyTitle>No messages</EmptyTitle>
    <EmptyDescription>
      You don't have any messages yet.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Compose</Button>
  </EmptyContent>
</Empty>

Examples

Basic empty state

<Empty>
  <EmptyHeader>
    <EmptyTitle>No results found</EmptyTitle>
    <EmptyDescription>
      Try adjusting your search or filter to find what you're looking for.
    </EmptyDescription>
  </EmptyHeader>
</Empty>

With icon media

Use the icon variant on EmptyMedia to render the icon inside a rounded, muted container.

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FileIcon />
    </EmptyMedia>
    <EmptyTitle>No documents</EmptyTitle>
    <EmptyDescription>
      Upload your first document to get started.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Upload Document</Button>
  </EmptyContent>
</Empty>

With action content

Use EmptyContent to add action buttons or other interactive elements below the header.

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <UsersIcon />
    </EmptyMedia>
    <EmptyTitle>No team members</EmptyTitle>
    <EmptyDescription>
      Invite people to start collaborating.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Invite Members</Button>
    <Button variant="outline">Learn More</Button>
  </EmptyContent>
</Empty>

API Reference

Empty

The root container. Renders a centered <div> with a dashed border and balanced text.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

EmptyHeader

A <div> that groups the media, title, and description with a max-width constraint.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

EmptyMedia

A container for an icon or image. Supports variant-based styling.

Prop	Type	Default	Description
`variant`	`"default" \| "icon"`	`"default"`	`"icon"` renders a `size-10` rounded background container with a larger icon.
`className`	`string`	—
`children`	`ReactNode`	—

EmptyTitle

The primary heading text for the empty state.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

EmptyDescription

Secondary descriptive text below the title. Renders in muted foreground color.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

EmptyContent

A <div> for actions or additional content, constrained to max-w-sm and centered.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—