Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Empty Chart
A React empty chart state with large BarChart3 icon showing no data available message without action buttons
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Charts without data look broken—users wonder if visualization failed. This React empty state uses shadcn/ui Empty component with large BarChart3 icon (h-16 w-16) from Lucide React featuring No data available title and explanation about pending data. Built with EmptyMedia without variant showing oversized icon and text-muted-foreground styling. The empty chart pattern manages expectations—perfect for analytics dashboards, reporting tools, data visualizations, or anywhere charts depend on external data that might not exist yet.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Empty Table
Empty data table with action
No Notifications
Informational empty state
Bar Chart
Standard bar chart with data
Link Action
Empty state with documentation link
Card Component
Chart card container
Skeleton Component
Loading skeleton for charts