Empty

Placeholder for lists, tables, and views that have no data yet. Compose EmptyMedia (icon or illustration), EmptyTitle, EmptyDescription, and EmptyContent for actions.

Default

Stacked isometric media (3D layers that lift apart on hover), title, description, and a call-to-action.

It's empty here

You are all caught up. New messages will land here.

Usage

Import the parts you need from the component's folder.

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

Outline

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

404 - Not Found

The page you are looking for does not exist. Try searching for what you need below.

/

Need help? Contact support

Background

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

Nothing to see here

No posts have been created yet. Get started by creating your first post.

Avatar

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

No members yet

Invite a teammate to start collaborating.

Minimal

Just a title and description.

No results

Try adjusting your filters.

With actions

EmptyContent holds one or more call-to-action buttons.

No projects yet

Create your first project or import an existing one.

API Reference

Empty

Prop	Type	Default	Description
`class`	`string`	—	Container styles.

EmptyMedia

Prop	Type	Default	Description
`variant`	`"default" \| "icon" \| "stacked"`	`"default"`	default for free-form illustrations, icon adds a muted rounded background, stacked renders an animated isometric layer stack with the icon on the front layer.

EmptyHeader / EmptyTitle / EmptyDescription / EmptyContent

Prop	Type	Default	Description
`class`	`string`	—	Layout and typography wrappers. Header groups media + title + description; Content holds the call-to-action.

Circular Progress Notifications