Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Empty Table
A React empty table state with Table icon showing no data message and Add Entry action button
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Empty tables confuse users—is data loading or truly absent? This React empty state uses shadcn/ui Empty component with Table icon from Lucide React featuring No data to display title, descriptive message about missing records, and Add Entry Button with Plus icon. Built with EmptyMedia variant icon and EmptyContent action. The empty table pattern clarifies absence—perfect for data grids, admin panels, dashboards, or anywhere tabular data might be empty guiding users to populate tables.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
No Files
Empty file directory with actions
Single Action
Simple action-based empty state
Data Table
Standard data table with rows
Empty Chart
Empty chart visualization
Button Component
Add entry button
Card Component
Empty state container