Empty

An empty state placeholder for when there's no content to display.

On this page

No Projects Yet

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

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FolderCodeIcon />
    </EmptyMedia>
  </EmptyHeader>
  <EmptyTitle>No Projects Yet</EmptyTitle>
  <EmptyDescription>
    You haven't created any projects yet. Get started by creating your first
    project.
  </EmptyDescription>
  <EmptyContent>
    <Button>Create Project</Button>
  </EmptyContent>
</Empty>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/empty

Usage

import {
  Empty,
  EmptyDescription,
  EmptyMedia,
  EmptyTitle,
} from '@/components/ui/empty'

<Empty>
  <EmptyMedia variant="icon">
    <FolderIcon />
  </EmptyMedia>
  <EmptyTitle>No projects</EmptyTitle>
  <EmptyDescription>Get started by creating a new project.</EmptyDescription>
</Empty>

Examples

No Projects Yet

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

API Reference

Empty

An empty state displays a placeholder message and optional actions when there is no content to show.

Supports all div attributes.

Prop	Type	Default

EmptyHeader

Contains the media, title, and description of the empty state.

Supports all div attributes.

Prop	Type	Default

EmptyMedia

The visual media of the empty state, such as an icon, image, or avatar.

Supports all div attributes.

Prop	Type	Default
	`"default" \| "icon"`	`'default'`

EmptyTitle

The main heading of the empty state.

Supports all div attributes.

Prop	Type	Default

EmptyDescription

Supporting text that explains the empty state or how to resolve it.

Supports all div attributes.

Prop	Type	Default

EmptyContent

Contains the actions and supplementary content of the empty state, such as buttons or links.

Supports all div attributes.

Prop	Type	Default

Last updated on 6/16/2026