Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Hover Caption Masonry Gallery Block for Radix UI

A 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.

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 hover-caption masonry wall for React with Radix UI. A centred header with a "3 saved" count sits over nine drawn pictures (rooms, stair halls, kitchens, facades) in three CSS columns, two on a phone. Each picture is a cell with its own hairline frame that overshoots the corners. A caption (title, place, year) and a Save toggle rise over the foot of the picture on hover and on focus, faded in by a mask, and are always shown under a coarse pointer. A saved picture keeps a filled mark in its corner, and the count follows in a polite status line. The pictures are drawn in the theme's greys, never photographed. It's built from Guides, Toggle and Badge. For inspiration sites, catalogues and any wall where a picture should stay clean until you reach for it.

FAQ

Is the caption only for the mouse?

No. The caption row holds a real Save toggle, so Tab reaches it and the caption appears with it (focus-within). Under a coarse pointer (a phone or a tablet) the caption and the toggle are simply always shown.

What does Save do, and what does the count say?

It flips a local list of saved ids; nothing is sent anywhere. The toggle is a native pressed button named "Save" plus the picture's title. A filled mark appears in the picture's corner and the "N saved" badge, a polite status, updates.

Why a mask instead of a colour overlay?

The caption sits on a solid bg-background panel whose top edge is faded into the picture with mask-image, so the text keeps full contrast in any theme and the picture is never tinted.

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.

Which keys work?

Tab visits each Save toggle in reading order, and Space or Enter presses it. There are no other tab stops.

Why does each picture have a frame?

Each cell draws its own Guides with a small overshoot, so the wall reads as separate pinned pictures. The cells are inline-block with their bottom padding, which keeps the frames from repeating at the foot of a column.

All 100 gallery blocks