Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Empty - No Files
A React no files empty state with FileText icon and two actions for Upload Files and Create Document
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Empty folders need options—users populate file systems different ways. This React empty state uses shadcn/ui Empty component with FileText icon from Lucide React featuring two horizontal buttons (Upload Files with Upload icon, Create Document with Plus icon) in flex gap layout. Built with contrasting button variants for action hierarchy. The no files pattern enables multiple workflows—perfect for file managers, cloud storage, document libraries, or anywhere users manage files through upload or creation.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Empty Table
Empty data table state
Multiple Actions
Two horizontal action buttons
Stacked Actions
Vertical stacked buttons
Button Component
Upload and create buttons
Dialog Component
File upload modal
Input Component
File input