shadcn.io is not affiliated with official shadcn/ui
Mood Board Gallery Block for Radix UI
A pinboard of twelve pieces of five kinds (pictures, paint chips, materials, words and type) pinned a degree off square, with a lens that dims the other kinds without moving anything.
Installation
Overview
A mood-board gallery for React with Radix UI, for Tackhouse, an interior-styling studio. A start-aligned header carries a "Show" lens at its end: All, Pictures, Tones, Materials, Words and Type. Under it, a pinboard sits in a framed figure with + marks on its corners, on a dot field for the cork. Twelve pieces of five kinds are pinned on it a degree or two off square, in a fixed layout with no gaps: four drawn pictures, two strips of paint chips, two material swatches (oiled oak and linen), two words and two type samples. The lens dims the pieces of the other kinds under a pale veil, and nothing moves or reflows; a polite line says "4 of 12 shown: pictures". The pictures are drawn, not photographed, in your theme's own greys; everything else is CSS. It's built from ToggleGroup and Guides, with CSS transitions and your theme's tokens for every colour. The studio and its pieces are made up for the example.
FAQ
How do I use my own pictures?
Each picture piece in PIECES has a scene and a ratio. Replace <Scene ratio={…} scene={…} /> in Body with <img alt="" className="size-full object-cover" src={…} />; the piece's text already names it. The other kinds are plain CSS: change a chip's share of foreground in CHIPS, a material's gradients in OAK and LINEN, or the words and type samples in the data.
How does the lens work?
The block keeps one value, the kind being shown ("all" at first). Every piece has a pale veil that is transparent while its kind is shown and 70% background while it isn't, with a short fade. The pieces keep their size, place and tilt, so the board never reflows and the page never jumps. Pressing the pressed item again does nothing: one kind is always chosen.
How does it work with a keyboard?
The lens is the only tab stop: Tab reaches it, the arrow keys move between its items and Space or Enter picks one. The pieces are not controls, so nothing else takes focus; each one is a figure that describes itself for a screen reader, in the order of the data. A polite line under the board says "4 of 12 shown: pictures".
How is the board laid out?
It is a grid of four columns and five rows from md, each piece placed by literal classes in its data (md:col-start-3 md:row-start-2) and sized by its spans, so the twelve pieces fill all twenty cells. On a phone it is two columns and the pieces flow in reading order with the same spans.