Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Re-lead Mosaic Gallery Block for React Aria

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 React Aria. 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-selection toggle button group that disallows an empty selection: 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.

All 100 gallery blocks