Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Re-lead Mosaic Gallery Block for React

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.

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 dense mosaic for React with Base UI. A centred header with a "Lead" control sits over nine drawn quilt patterns on shared hairlines that run rail to rail and end the block: eight squares and one lead that spans two columns and two rows, packed with grid-auto-flow: dense. Choose picture 1, 3 or 5 as the lead and the big square moves while the others flow around it with no gap, since the cells add up to whole rows (six columns by two rows from md, three by four on a phone). Every square carries its number, the lead shows its name, and a polite line names the lead. The patterns are drawn in the theme's greys, never photographed. It's built from Guides and Toggle Group. For pattern shops, lookbooks and any set with one hero among equals.

FAQ

Why can the lead be only picture 1, 3 or 5?

With six columns and two rows, a two-by-two lead has to start before the first row is full, or it would need a third row. Picture 5 is the last place where it fits; a different column count allows other choices.

Does the reading order change when the lead moves?

No. The list stays in the same order for screen readers and the Tab order; only the grid placement changes. Each square shows its number so the order is visible too.

Which keys work?

The Lead group is a single-choice toggle group that always keeps one value on: Tab goes to it, the arrow keys move between 1, 3 and 5, and Space or Enter chooses.The squares themselves are plain content.

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.

Does the page move when the lead changes?

No. Twelve cells always fill the grid (6 by 2, or 3 by 4 on a phone), so the height is constant.

How does it fit on a phone?

Three columns by four rows; the lead still spans two by two.

  • Pro

    Sortable Masonry Gallery

    Masonry and mosaic

    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.

  • Pro

    Expandable Tile Grid Gallery

    Hairline grids

    Twelve drawn potted plants on shared hairlines where choosing one grows its tile to two cells wide and two tall while the others flow around it, one open at a time, with Escape or a button to put it back and a grid that never changes height.

  • 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

    Balanced Waterfall Gallery

    Masonry and mosaic

    A 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

    Paginated Minimal Grid Gallery

    Hairline grids

    A quiet grid of twenty-four drawn concrete-architecture plates, eight to a page on shared hairlines, with a title and year that appear on hover and focus and the catalog pagination in a band that ends the block.

  • Pro

    Mosaic Testimonials

    Quote grids

    A checkerboard of monogram portrait tiles and quote tiles in cells that share their hairlines, each quote beside its speaker and the second row swapped, under a compact header with a Shine Button.

All 100 gallery blocks