shadcn.io is not affiliated with official shadcn/ui
Asymmetric Mosaic Awards Block for React Aria
Seven awards for a type marketplace on a 4-column hairline grid with different spans: a 2 by 2 lead with a large drawn trophy, two 2 by 1 runners-up and four small cells.
Installation
Overview
A mosaic of awards for React with React Aria. Seven cells share their hairlines on a 4-column grid, running rail to rail under a start-aligned header with a tally counted from the list ("7 awards across 4 years"). The spans are the feature: the grand prize is a 2 by 2 lead with a faceted gem on a plinth drawn large, its category and one line from the jury; two 2 by 1 cells carry the runners-up with a short citation; four 1 by 1 cells fill the row under them, each with a small mark of its own (a pennant, a hexagon, a tilted square, a triangle). The lead is first in the DOM, so it is read first, and the list is named Awards. On a phone the grid is two columns, with the lead and the wide cells on their own rows and the small ones in pairs. It's built from Guides, inline SVG and your theme's tokens, with a CSS transition for the entrance. The awards and programmes are made up for the example: replace them with your own.
FAQ
How do I change the spans?
The grid is four columns from md and two below it. The lead is col-span-2 and, from md, row-span-2; the two wide cells are col-span-2; the small ones take one column. Browsers place them in order, so the lead fills the first two columns of rows one and two, the wide cells fill the other two, and the small cells fill row three. Keep that count (one lead, two wide, four small) or adjust the spans so every row is full, otherwise a gap shows the hairline colour.
How do I change the awards?
Edit LEAD, WIDE and SMALL at the top of the file. Each award has a title, its programme, a result in words ("Grand prize", "Winner", "Finalist"), a fixed year and a mark; the lead and wide awards also have a category and a citation. The header's tally is counted from all three lists.
How do I draw a different mark?
A Mark is a list of closed outlines with a faint solid fill (fills) and a list of plain strokes drawn over them (lines) in a 64 by 64 box; Drawn sizes it from the class you give it. The strokes keep a constant width at any size, and the fill is opaque, so overlapping parts hide each other's outlines. Marks are drawings only, hidden from assistive technology; the award is always in the text.
Are these real awards?
No. Quartzbridge, Juniperholt, Kilnford, Mirrowick, Orchardley, Pelhamstow and Quillfair are made-up programmes and Glyphwright a made-up marketplace. If you show a real award, use its name in text and its official badge only where its rules allow it.
How do screen readers read a cell?
Each cell is a list item that opens with the result and the year ("Grand prize, 2025"), then the award as a heading, then the programme and, in the larger cells, the category and the jury's line. The drawings are hidden from assistive technology, and each year sits in a bdi element so it keeps its place in a right-to-left layout.