Empty

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

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>

Anatomy

EmptyHeader groups the media, title, and description; EmptyContent holds the actions below. Pass variant="icon" to EmptyMedia to render its child inside a bordered icon container.

import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from '@/components/ui/empty'
;<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">{/* icon */}</EmptyMedia>
    <EmptyTitle>{/* heading */}</EmptyTitle>
    <EmptyDescription>{/* supporting text */}</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>{/* actions */}</EmptyContent>
</Empty>

Examples

Basic Empty State

No projects yet

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

Create project

Learn more

No Projects

No Projects Yet

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

In Card

No projects yet

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

Create project

Learn more

404 Error Page

404 - Not Found

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

/

Need help? Contact support

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 7/9/2026