Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Empty with Single Action
A React empty state with single action button showing Plus icon, title, description, and Create Project call-to-action
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Empty states guide action—blank screens without direction frustrate users. This React empty state uses shadcn/ui Empty component with Plus icon from Lucide React featuring EmptyMedia, EmptyTitle, EmptyDescription, and single Button action in EmptyContent. Built with structured Empty components providing clear visual hierarchy. The single action empty state pattern reduces friction—perfect for project dashboards, file managers, task lists, or anywhere users encounter empty data needing one clear next step.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Multiple Actions
Empty state with two action buttons
Stacked Actions
Vertically stacked action buttons
Empty Table
Empty state for data tables
No Messages
Empty messaging state with action
Button Component
Primary action button
Card Component
Container for empty states
Questions you might have
React Dropdown Menu - Resources Menu
A React resources menu dropdown organized into Learning Resources and Developer sections with external links to documentation, API reference, code examples, GitHub, and community forum built with shadcn/ui
React Empty with Multiple Actions
A React empty state with two action buttons for Upload File and Import from URL showing multiple paths to add content