Toggle Sidebar B
AppearanceLight & dark mode D

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.

Replay preview
It's empty here

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

Outline

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

Replay preview
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.

Replay preview
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.

Replay preview
No members yet

Invite a teammate to start collaborating.

Minimal

Just a title and description.

Replay preview
No results

Try adjusting your filters.

With actions

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

Replay preview
No projects yet

Create your first project or import an existing one.

API Reference

Empty

PropTypeDefaultDescription
classstringContainer styles.

EmptyMedia

PropTypeDefaultDescription
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

PropTypeDefaultDescription
classstringLayout and typography wrappers. Header groups media + title + description; Content holds the call-to-action.