shadcn.io is not affiliated with official shadcn/ui
Empty State examples · Data
Empty Chart Empty State for React
A chart's empty state with a large bar chart icon and a note that data will appear once it's available.
A chart with nothing to plot can look broken. This empty state puts a large bar chart icon straight in EmptyMedia, without the icon tile, then says no data is available yet and that it will appear once it is. There is no action, because the reader can't make data arrive. Use it in analytics panels and reports that wait on data from elsewhere.
Preview
Installation
FAQ
Why is the chart icon so large?
EmptyMedia has no variant, so it stays the plain slot, and ChartColumnIcon sets size-16 and text-muted-foreground. variant="icon" would draw the small icon tile and size an unsized glyph for you. This demo sets the size on the icon.
What does the empty chart say?
EmptyTitle is "No data available". EmptyDescription says there is nothing to display yet and that data will appear once it is available. Change those two strings to name the chart.
Where would a button go?
This file has no EmptyContent. The message is EmptyTitle and EmptyDescription inside EmptyHeader. Add EmptyContent after the header when the chart needs a button.
How do I use a different chart icon?
Swap ChartColumnIcon for another icon and keep className="size-16 text-muted-foreground". Leave variant off EmptyMedia so that size class is what draws.
Related
- Empty Table Empty StateAn empty table state with a table icon
- No Notifications Empty StateAn empty notifications list with a bell
- A bar chartA bar chart with rounded corners
- Empty with Link Action Empty StateAn empty state with a book icon and a
- Standard CardA basic card with a title, a description
- No Files Empty StateAn empty folder with a file icon and