shadcn.io is not affiliated with official shadcn/ui
No Uploads Empty State Block for React Aria
A transfer tool's uploads page as a whole screen: one big dashed drop zone with a drawn letterbox, the rules shown and enforced, and two lists, the files added and the files turned down with their reasons.
Installation
Overview
Show an empty uploads page that already tells people the rules, with this no uploads empty state for React with React Aria. A whole screen, drawn with the page's rails and one band across it, holds Chuteway, a file-transfer tool: one big dashed drop zone as the band's content, not a card. Its first half has a drawn letterbox with its flap lifted and a dashed parcel above it, a heading, one sentence and the Shine Button, the only colored control, which opens the file picker and is the only way in on a phone. Its second half lists the rules (five types, 5 MB each, four files at most) and two lists: the files added, four slots that fill with a check, a name and a size, and the files turned down, each with its reason in words, such as report.exe: type not allowed. The File Upload enforces the rules, drag-over is a ring on the zone and never the primary color, and the first accepted file turns the parcel solid and drops it toward the slot. The frame is ruled by Guides, and everything moves with CSS transitions only. For the empty page of any tool where people send files.
FAQ
What stays in the page, and how do I make it real?
The files stay in the tab: the page reads only each file's name, size and type and lists them, and never opens, uploads or sends one, so a reload empties both lists and Start over empties them without a reload. To wire it for real, send each accepted file to your storage where the code says so and show its progress in the slot, and keep the rules on your server too, since the zone's checks are for the visitor's convenience.
How are the rules enforced?
The zone is given the five types, the 5 MB limit and the picker, so a file that breaks a type or size rule is turned down before it is listed and lands in Not added with its reason: type not allowed or over 5 MB. The limit of four files is counted by the page across selections: files past the fourth are turned down with limit of four files reached. Edit the type list, the size and the limit at the top of the file to match your service.
Where can I drop files?
Anywhere in the dashed box. While you drag a file over it, the border darkens, the box tints and a ring appears, all in the text color and never the primary one. Clicking the box does nothing, so a click on the text never opens a dialog by accident: the button is the way to choose files, and the one a keyboard or a phone uses.
Is it usable with a keyboard and a screen reader?
Tab reaches Choose files and then Start over, and the headings give the page its outline: the title, then Rules, Added and Not added. The drawing is hidden from assistive technology, an empty slot is announced as one, and one polite status line says what happened after each choice, such as 2 of 4 added, 1 turned down.