Empty State

Feedback

A placeholder for panels that have no content yet.

The EmptyState explains why a view is empty and, optionally, how to fill it. Use it for lists, search results, and dashboards.

npx shadcn@latest add empty-state

With an action

Point users to the next step with a button.

Preview

Live

No invoices yet

Invoices you create will appear here. Get started by creating your first one.

tsx

1<EmptyState
2  icon={InboxIcon}
3  title="No invoices yet"
4  description="Invoices you create will appear here."
5  action={<Button>Create invoice</Button>}
6/>

Without an action

For empty results that need no direct next step.

Preview

Live

No results found

Try adjusting your search or filter to find what you're looking for.

tsx

1<EmptyState
2  icon={SearchIcon}
3  title="No results found"
4  description="Try adjusting your search or filter."
5/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
icon	LucideIcon	Icon rendered inside the circular badge.
title	string	Primary heading for the empty state.
description	string	Supporting text explaining why the view is empty.
action	ReactNode	Optional actions, typically a Button.
className	string	Custom classes for the dashed container.