shadcn.io is not affiliated with official shadcn/ui
Customer Creations Gallery Block for React
Eight drawn ceramic pieces on shared hairlines that re-lay between a dense mosaic and picture-and-quote cells with a toggle, holding the block's height.
Installation
Overview
A customers'-creations gallery for React with Base UI, for Kilnmoor, a glaze-and-clay subscription. A start-aligned compact header has a "Show" toggle at its end, and under it one set of eight pieces re-lays itself between two forms on shared hairlines. "Pictures" is a dense mosaic: one big tile two cells square, one tall tile and six small ones, each with a solid name chip. "With quotes" is two columns of cells, each a picture beside the customer's one-line quote, their initials and their name. Both layouts sit in one grid cell and the one not shown is unseen, so the block keeps the same height whichever is on, and a polite line says which one it is showing. The pictures are drawn, not photographed: glazed mugs, vases, bowls and plates in your theme's own greys. It's built from ToggleGroup, Avatar and Guides, with your theme's tokens for every colour. The company, the customers and the quotes are made up for the example.
FAQ
How do I use my own customers' pictures?
Each entry in PIECES has an item, a maker, initials, a quote, a mosaic cell placement and a scene. Replace the Scene in the mosaic tile and in the quote cell with <img alt="" className="size-full object-cover" src={…} />; the figure's caption already names the piece. Only use a customer's name, initials and words with their permission.
How is the mosaic laid out?
The mosaic is a four-column, three-row grid on shared hairlines, and each tile's place is a set of literal classes in cell: the first tile spans two columns and two rows, the third spans two rows, the rest take one cell. That fills all twelve cells with no gaps. On a phone the grid is two columns and five rows, with the first and last tiles across both columns. The tiles are cropped to their cell as an object-cover image is.
Does the block change height when I switch?
No. Both layouts are in the page at once, stacked in one grid cell: the visible one is shown and the other is invisible, inert and aria-hidden, so it takes up its space but cannot be seen, focused or read. The mosaic stretches to the height of the taller quote layout. A screen reader only meets the one that is on.
How does the toggle work with a keyboard?
It is a single-choice toggle group, so Tab reaches it, the arrow keys move between "Pictures" and "With quotes", and Space or Enter chooses one. One option is always chosen; pressing the chosen one again does nothing.
Related
- Pro
Re-lead Mosaic Gallery
Masonry and mosaicA 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
Mosaic Testimonials
Quote gridsA 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.
- Pro
Annotated Group Portrait Gallery
Annotated picturesA drawn group portrait of fourteen people in three tiers beside a numbered key, where pointing at or focusing a name rings that person in the picture and the other way round.
- Pro
Masonry Testimonials
Walls and lanesA masonry wall of twelve notes from runners in CSS columns inside a framed figure: cards of every length stack tight, from one column on a phone to four on a wide screen.
- Pro
Sortable Masonry Gallery
Masonry and mosaicA 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
Mini Preview Gallery Widget
Stage and thumbnailsA 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.