shadcn.io is not affiliated with official shadcn/ui
Laurel Display Awards Block for React Aria
A band of five awards for a weather app, each a laurel wreath drawn in SVG around the award's title and year, with the programme, category and issuer in text and the lead award larger in the middle.
Installation
Overview
A laurel display for React with React Aria. A short header and a tally counted from the list ("5 awards since 2023") sit above a band of five awards in cells that share their hairlines, running rail to rail and ending the block. Each award is a laurel wreath drawn in SVG, two mirrored branches of leaves in your theme's foreground, around the award's title and year; under it the programme is a heading, with the category and the issuer below. The lead award sits in the middle, larger and in solid leaves, its year on a ribbon tied across the stems. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Guides, an inline SVG and your theme's tokens, with a CSS transition for the entrance. The programmes are made up for the example: replace them with the awards your product has won.
FAQ
How do I change the awards?
Edit AWARDS at the top of the file. Each award has a programme, a short title the wreath frames ("Gold", "Top 10"), its category, its issuer and the year, a fixed number: an award given in 2025 stays 2025. lettering sets the title's type on the badge, and pairs and spread shape its wreath, so each programme's badge looks like its own. Mark one award featured to make it the lead: it's drawn larger, in the middle from lg. With five awards every row of the band is full; for four or six, change the grid's columns to match.
Are these real awards?
No. Thistlemere, Fenwold, Calderby, Gannetby and Kestwick are made-up programmes and Brumewick a made-up app. The wreaths are drawn by the block, not copied from any award body. If you show a real award, use its name in text, and use its official laurel or logo only if its rules allow it.
How do I draw a different laurel?
Laurel draws a wreath that fills its box, in the box's text colour, so set the size on the box around it. pairs is the number of leaf pairs on each branch, spread how far each branch climbs in degrees (about 110 to 150), and the leaves grow to fill the stem between them. weight="line" outlines the leaves on a faint fill; "solid" fills them. ribbon ties a ribbon across the stems for the year or a word. For a small mark under 32 pixels, like the one beside the tally, use three or four pairs in the line weight. On a card, mix the faint fill with --card instead of --background.
Where does the tally come from?
It's counted from AWARDS: the number of awards and the earliest year among them. Add or remove an award and the line updates itself, so the header always matches the band.
How do screen readers read an award?
The awards are a list named Awards. Each item opens with the programme as a heading, then the title and year from the badge ("Gold, 2025"), then the category and the issuer as a description list whose terms are visually hidden. The wreath is a drawing hidden from assistive technology, so nothing depends on it, and each year sits in a bdi element so it keeps its order in a right-to-left layout.
How does it fit on a phone?
The lead award takes the first row on its own and the other four run two across beneath it, with the wreaths a size smaller; from md they run four across, and from lg all five share one row with the lead in the middle. Names and categories wrap inside their cells, and nothing scrolls sideways at 320 pixels. In a right-to-left layout the order mirrors and the wreaths, being symmetric, stay as drawn.