Shadcn.io is not affiliated with official shadcn/ui
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
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.
Empty with Multiple Actions preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.