Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
One path forward isn't always enough—users need choices for how they populate empty states. This React empty state uses shadcn/ui Empty component with Upload icon from Lucide React featuring two horizontal buttons (primary Upload File, outline Import from URL) in EmptyContent. Built with flex gap layout and contrasting button variants. The multiple actions pattern respects user workflow—perfect for file uploads, data imports, content creation, or anywhere users have legitimate different methods to fill empty space.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Single Action
Empty state with one primary action
Stacked Actions
Vertically stacked full-width buttons
No Files
File empty state with multiple actions
Button Component
Primary and outline button variants
Button Group
Grouped action buttons
Dialog Component
Upload or import modal