shadcn.io is not affiliated with official shadcn/ui
Media Library Gallery Block for React
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 Base UI, 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.
Related
- Pro
Sort Controls Gallery
Filter, sort and tabsEight drawn bike frames that each print their date, likes and title, with a Sort by select, a reverse toggle and a Grid or List switch, so the order is checkable by eye.
- Pro
Mixed Media Stage Gallery
Stage and thumbnailsOne stage that changes its controls with the file: a zoom slider for an image, a storyboard with Play and a scrub slider for a video, a waveform for audio, and page buttons for a document.
- Pro
Multi-Select Bulk Actions Gallery
Select and actEight drawn scans on shared hairlines, each with a checkbox, a Select all box that shows a mixed state, Shift to take a run, and a bar with Download, Share and an undoable Delete.
- Pro
Upload Queue Preview Gallery
Select and actA file drop zone that lists every file you pick or drop (name and size, never opened) beside a queue of four seeded files in their states, with Retry, Remove and a Send button.
- Pro
Lightbox Gallery
Stage and thumbnailsNine pictures of a photography studio's year on shared hairlines, a featured frame and a caption under each, where every frame opens one viewer dialog with the whole picture, its credit, Previous and Next, a counter, arrow keys and a swipe.
- Pro
Live Search FAQ
SearchA searchable FAQ for a notes app: a start-aligned header, a band with a full-width search field and a live count, and ten questions that filter as you type, open every match and mark the matched words.