Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Sortable Masonry Gallery Block for Ark UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A masonry wall for React with Ark 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?

The Order group is a single-choice toggle group that always keeps one value on: Tab goes to it, the arrow keys move between Newest and Oldest, and Space or Enter chooses.The pictures and captions are plain content, read in order.

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.

How does it fit on a phone?

Two columns, with the wall cut off at 40 rem and faded out. A "Show all 12" ghost button below it (aria-expanded, aria-controls, a constant label) removes the cut. The Order control stays in the header.

Does it work right to left?

Yes. The columns start at the right edge and the captions follow the reading direction; dates and credits sit in bdi, so mixed text keeps its order.

All 100 gallery blocks