Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Mini Preview Gallery Widget Block for React

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

  • Pro

    Lightbox Gallery

    Stage and thumbnails

    Nine 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

    Thumbnail Strip Gallery

    Stage and thumbnails

    A viewer for a lighting shop: a framed 4:3 stage with Previous and Next, its caption beside it, and a scrollable strip of twelve thumbnails whose arrow keys step through the pictures.

  • Pro

    Featured Hero Gallery

    Masonry and mosaic

    A boat-charter gallery on one hairline grid: a featured picture two cells wide and tall beside four small ones, and choosing a small picture swaps it with the featured one in place.

  • Pro

    Density Photo Wall Gallery

    Hairline grids

    Twenty-four small drawn pictures on shared hairlines whose columns follow a Density slider, each offering one action, Copy link, that confirms in place.

  • Pro

    Re-lead Mosaic Gallery

    Masonry and mosaic

    A 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

    Media Library Gallery

    Filter, sort and tabs

    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.

All 100 gallery blocks