shadcn.io is not affiliated with official shadcn/ui
Sortable Masonry Gallery Block for React
A masonry wall of twelve drawn pictures of mixed ratio in CSS columns, framed with + marks on its corners, with an Order control (Newest or Oldest) that re-sorts them.
Installation
Overview
A masonry wall for React with Base UI. Twelve drawn pictures of different ratios flow down CSS columns (two on a phone, three from md, five from lg) inside a framed figure with + marks on its corners, each with a one-line caption of title, credit and date. An "Order" group at the end of the header switches between Newest and Oldest, which re-sorts the data from fixed dates. The other order is laid out unseen in the same grid cell, so the frame keeps the height of the taller one and nothing below moves, and a polite line says how the wall is sorted. On a phone the wall is masked at a fixed height with a "Show all 12" button. The pictures are drawn in the theme's greys, never photographed. It's built from Guides, Toggle Group and Button. For archives, mood libraries, portfolios and any wall where height varies and order matters.
FAQ
How do the columns read?
CSS columns fill the first column from top to bottom, then the second, so the reading order is the list's order, and a screen reader hears the pictures in that order. Picture ratios are chosen so the five columns end near the same height in both orders; with your own pictures, columns will be as even as the mix allows.
What does the Order control do, and does the page jump?
It swaps which of two ready-made lists is shown: newest first (by the fixed ISO date on each entry) or the reverse. Both lists are laid out in one grid cell, the hidden one with invisible, aria-hidden and inert, so the frame is as tall as the taller list. A few pixels of slack can appear under the shorter one, and the page never moves.
Which keys work?
How do I use my own photographs?
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 photograph's own so the layout doesn't change.
Related
- Pro
Hover Caption Masonry Gallery
Masonry and mosaicA masonry wall of nine drawn interiors in three columns, each in its own framed cell, with a caption and a Save toggle that rise on hover and on focus and a live count of saved pictures.
- Pro
Balanced Waterfall Gallery
Masonry and mosaicA waterfall of twelve drawn pictures in two, three or four columns on shared hairlines, a switch between shortest-column and round-robin flow, and bars under the wall that read each column's height.
- Pro
Container Query Columns Gallery
Hairline gridsA resizable split, copy and a framed wall of twelve square swatches: drag the divider to change the wall's width and container queries turn two columns into up to five, with a live readout.
- Pro
Re-lead Mosaic Gallery
Masonry and mosaicA dense mosaic of nine drawn quilt patterns on shared hairlines, eight squares and one lead two cells wide and two tall, with a Lead control that moves the big square while the rest reflow.
- 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
A masonry wall of six cards of different heights for a team workspace: a checklist whose boxes really tick, a quick-add bar, a stat, a three-lane board, a set of tags and a thread with a mention.