shadcn.io is not affiliated with official shadcn/ui
Media Library Gallery Block for React Aria
A media manager drawn as a window in a hairline frame: tabs that filter by type, a search field, a List or Grid switch, twelve files with size and upload date, and an Empty state.
Installation
Overview
A media library for React with React Aria, for Mediahurst, a CMS media manager. A start-aligned header sits over one real window in a hairline frame with + marks on its corners, not a whole app. Its toolbar has a type filter (All, Images, Video and Docs as Tabs, each with its count), a search field and a List / Grid switch. Under it a body scrolls twelve files, each with a drawn thumbnail, its size and a fixed upload date; videos carry their length and documents their page count. A foot counts what is shown ("2 of 5 images named "plant""). List view is the default. The body keeps one height whatever the filter, the view or the search, and a search with no hits shows an Empty state with a Clear search button. Pictures are drawn, never photographed. It's built from Tabs, Input Group, Toggle Group, Empty, Badge and Guides.
FAQ
How do the tabs and the search work together?
The tab picks the type and the search narrows it by name, so "plant" in Images finds the one image, and the same search in Docs finds nothing. Switching tabs keeps what you typed. The foot line says how many of that type match, and the tab counts are the totals for each type, not the matches.
How do the tabs behave?
Does the window change size?
No. The body is a fixed height and scrolls inside (it is a focusable region, so the keyboard can scroll it), whether it shows twelve files, one, or the Empty state. A list row is 56 px; the grid shows two columns on a phone and up to six from lg.
What does a search with no results show?
The catalog Empty state: an icon, "No files match", the type and the text you searched for, and a Clear search button that empties the field and brings the files back. The foot line still counts ("0 of 5 images").
How do I use my own pictures?
The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the picture's own so the layout doesn't change. Give each file its own src and keep the thumbnail 4:3.