shadcn.io is not affiliated with official shadcn/ui
No Media Empty State Block for React Aria
A media library's empty shelf: six tiles on shared hairlines, each with its own tiny drawn scene, that fill one by one with your own pictures, their file names and a Remove that puts the scene back.
Installation
Overview
Show an empty media library as the shelf it is about to become, with this no media empty state for React with React Aria. A hairline frame with a plus mark on each corner holds Pebbleframe's library: six tiles on shared hairlines, three across (two on a phone), each with a tiny drawn scene of its own, a hill and the sun, a mug, a leaf, a bicycle, a boat and a lamp, inside a dashed frame that says a picture goes here. The Shine Button, the only colored control, opens the picker for images, and the shelf takes dropped pictures too. Each picture replaces the next free tile with its own thumbnail and its file name, the band's count reads 2 of 6 tiles filled, and Remove on a tile puts its scene back. Files that are not images are turned down in a line of words. The File Upload does the picking and dropping, the frame is ruled by Guides, and the tiles change with CSS only. For the empty library of any product that shows pictures.
FAQ
What stays in the page, and how do I make it real?
The pictures stay in the tab. A thumbnail is shown from a temporary address that the page makes for the file and revokes when its tile lets go of it; the file is never read, uploaded or saved, so a reload empties the shelf and Start over empties it without a reload. To wire it for real, send each file to your storage where the code says so, keep its URL in the tile instead of the temporary one, and show an upload failure in the status line.
How do the tiles fill?
Pictures take the free tiles in order, whether you chose them or dropped them on the shelf, and a tile you removed is the first to be free again. If more pictures come than there are free tiles, the ones that fit are added and the line says how many did not. With all six filled the button is off and the line says to remove one to make room; Remove, on any tile, turns it back on.
What happens with a file that is not a picture?
The picker only offers images, and a file that is not one, dropped on the shelf, is turned down: no tile takes it and the status line names the file. More than six at once is turned down too, with a line that says so. Change the accepted types on the File Upload, and the size limit if you want one.
Is it usable with a keyboard and a screen reader?
Tab reaches the button, Start over and each tile's Remove button, which is named for its file. The scenes are hidden from assistive technology and the thumbnails carry no description, since the file name beside each one says what it is. One polite status line says what changed, and after a removal focus moves to the button.