shadcn.io is not affiliated with official shadcn/ui
Media Gallery CRUD Block for Radix UI
A photographer's library as a list with drawn thumbnails beside an albums rail, files picked on this device and read for name, type and size only, a popover that adds a file to albums, and two ways to remove: from an album or from the library.
Installation
Overview
Sort a photographer's files into albums, and keep two kinds of removal apart, with this media gallery for React with Radix UI. A hairline frame with a plus mark on each corner holds an albums rail with counts at the start (a row of chips you scroll sideways on a phone) and, at the end, one frame of fixed height that scrolls inside itself with a row per file: a drawn greyscale thumbnail, the name, the type, the size in Format Byte and the albums it is in. "Add media", the only Shine Button, is a File Upload trigger: pick files on this device and each becomes a row, where the browser is asked only for the name, the type and the size and nothing is uploaded. Add to album opens a Popover of checkboxes that add or take out the file at once. Inside an album, Remove from album keeps the file in the library; Delete from library asks in an Alert Dialog and removes the file from every album. New album opens a draft row in the rail. Each removal leaves an Undo in the foot, an empty album shows an Empty state, and the bands are ruled by Guides. For photo libraries, media desks and any list where a thing can be filed in several places.
FAQ
How do I fill it with my files and albums?
Edit ALBUMS (an id and a name) and MEDIA (an id, a name, a MIME type, a size in bytes and the ids of its albums). The counts, the album text on each row and the view are derived. The thumbnails are drawn from each file's id, so every file looks different without an image.
What does the browser read from a picked file?
Its name, its MIME type and its size, and nothing else: the file is never opened, uploaded or kept, and the picker holds no files of its own. JPEG, PNG and MP4 up to 200 MB are accepted; others are skipped with a line that says why. A file with the same name and size as one in the list is skipped too, and the list holds 24 files.
What is the difference between the two removals?
Remove from album takes the file out of the album you are viewing and nothing more: it stays in the library and in its other albums, and it appears only when you are inside an album. Delete from library asks first and removes the file from the library and every album. The popover's checkbox for the album you are in is marked "Use Remove from album" so the two never overlap.
What does Undo restore?
The last removal of either kind. The block stores the files as they were; Undo puts them back and focuses the file's Add to album button. Adding files replaces that Undo, and nothing times out.
How does it look on a phone?
The rail becomes a row of rounded chips above the list that scrolls sideways, and each file's buttons wrap under its name. The frame still scrolls inside itself, so the page stays short.
What stays local, and how do I wire a real library?
The files and albums live in React state in this tab and a reload brings the original seven back; nothing is uploaded. In your app upload each picked file in accepted, save album changes in toggleAlbum, leave and remove, and keep Undo as a request to restore.