Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Data

Empty Table Empty State for React

An empty table state with a table icon and an Add Entry button.

Framework
UI library

A table with no rows yet, and the button that adds the first one. A table icon, the title No data to display and a description sit above an Add Entry button with a plus icon. Use it in place of an empty table body in admin panels and dashboards.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What is the Add Entry button?

A default Button in EmptyContent with a PlusIcon icon and the label Add Entry. The file does not insert a row. Handle that on click.

Which icon is in the header?

TableIcon is in EmptyMedia with variant="icon". PlusIcon is only on the button.

What does the empty table say?

EmptyTitle is "No data to display". EmptyDescription says there are no records yet and to add the first entry.

Does this render table rows?

No. It is a standalone Empty, with no table headers or cells. Put it where the table body would have been.

What is inside EmptyHeader?

EmptyMedia, then EmptyTitle, then EmptyDescription. EmptyContent is the next sibling and holds the button.

What name does the button get?

Add Entry, from its text. Mark PlusIcon and TableIcon aria-hidden so those icons are not named as well.

All 22 empty state examples