shadcn.io is not affiliated with official shadcn/ui
Empty State examples · Data
No Files Empty State for React
An empty folder with a file icon and Upload Files and Create Document buttons.
An empty folder that offers both ways to fill it. A file icon in the icon tile, the title No files uploaded, and a description sit above two buttons: Upload Files and an outline Create Document, each with an icon before its label. Use it in file managers, document libraries and shared drives.
Preview
Installation
FAQ
What are the two actions?
Upload Files is a default Button with an UploadIcon icon. Create Document is variant="outline" with a PlusIcon icon. Both sit in a div with flex gap-2 inside EmptyContent.
What icon is in the header?
FileTextIcon is inside EmptyMedia with variant="icon". The icons on the buttons are separate from that tile.
What does the empty folder say?
EmptyTitle is "No files uploaded". EmptyDescription says the folder is empty and to upload files or create documents to get started.
Which button comes first?
Upload Files is first in the row, then Create Document. The row uses gap-2, so the gap follows the inline direction.
Related
- Empty Table Empty StateAn empty table state with a table icon
- Empty with Multiple Actions Empty StateAn empty upload state with Upload File
- Empty with Stacked Actions Empty StateAn empty team state with full-width
- Button with Text (Standard)The one filled action
- Standard DialogA share dialog with a read-only link, a
- Input with LabelA text input with a label above it