Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Mini Preview Gallery Widget Block for Radix UI

A shared-album widget: a 2 x 2 grid of thumbnails with a +8 count, a View all button that opens a contact sheet of twelve pictures, and Set as cover, which puts a picture first in the widget.

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 gallery widget for React with Radix UI. A card in a framed figure (+ marks on its corners) holds a 2 x 2 grid of thumbnails, the last one carrying a "+8" count, the album's name, a "Shared with 4" badge and a "View all 12" button. Any thumbnail, or the button, opens one dialog: a contact sheet of every picture as a radio group (the arrow keys step through them, the chosen one is ringed), with the chosen picture's title and description and a Shine Button, "Set as cover". Setting a cover puts that picture first in the widget behind the dialog, and the button then reads "Current cover". Escape or the close button shuts the sheet and focus returns to the button that opened it. On a phone the sheet fills the screen. The pictures are drawn in the theme's greys, never photographed. The page's rails and top rule come from the Guides spine. It's built from Guides, Dialog, Button, Badge and Shine Button. For shared albums, dashboards, sidebars and anywhere a few pictures stand for many.

FAQ

What does Set as cover do?

It keeps one id in state (cover) and the widget shows orderedFor(cover): the cover first, then the others in the album's order, four in all. The change is announced in a polite line ("The coast path is now the cover.") and the picture in the sheet gets a "Cover" tag. Wire makeCover to your API to save it for everyone who shares the album.

Where does focus go when the sheet opens and closes?

On opening, focus moves to the close button inside the sheet.Tab stays inside until you close it. On closing, focus returns to the button that opened it: the thumbnail you pressed, or View all. The thumbnails are keyed by slot, so after a new cover they keep their place and their focus.

Which keys work?

In the sheet, Tab goes to the pictures (one tab stop, a radio group named "Pictures"), the arrow keys move the choice, Tab again reaches Set as cover, and Escape closes. In the widget every thumbnail and View all are buttons. Set as cover stays focusable when the picture is already the cover (it is marked disabled for assistive technology and does nothing), so focus never drops out of the dialog.

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> with object-cover in the widget's squares and in the sheet's 4:3 tiles, and give each entry of PICTURES a src. Set SHOWN to change how many thumbnails the widget shows; the count adapts.

What moves, and what happens with reduced motion?

The block fades up once on load, the thumbnails zoom slowly on hover and the sheet animates in. With reduced motion all of these are off and the sheet simply appears.

How does it fit on a phone?

The copy comes first and the widget under it, centred. The contact sheet is full screen with three pictures to a row, scrolling when they don't fit, and the Set as cover button spans the foot of the screen.

All 100 gallery blocks