shadcn.io is not affiliated with official shadcn/ui
Customer Creations Gallery Block for React Aria
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 React Aria, 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. The group uses React Aria's single selection with an empty selection disallowed.