shadcn.io is not affiliated with official shadcn/ui
Award Shelf Footer Block for React Aria
A footer for a design-system tool with a shelf of four award cells, each a greyscale laurel drawn around a glyph with the award's name, category and year, above the legal band.
Installation
Overview
An award-shelf footer for React with React Aria. A first row holds the wordmark and one sentence beside two link columns in a nav labelled Footer. Under it a shelf of four cells, framed with overshoot lines and + marks, shows an award each: a laurel drawn in the foreground tone around a small glyph, the award's name, its category and the year. The shelf is two across on a phone and four from lg. The awards are made up for the example, with no real guild or logo. A legal band closes the page. It's built from Guides, plain links and your theme's tokens.
FAQ
How do I change the awards?
Edit the AWARDS array at the top of the file: each entry has a name, a category, the year it was won and a glyph, a path in a 64 by 64 box drawn inside the laurel. Keep four so the shelf fills a row from lg. Replace the made-up names with the awards you won, and remove the example line under the shelf.
Is the laurel a real award mark?
No. It is one shared drawing: six leaves up each side of a circle, mirrored, in the foreground tone, hidden from assistive technology. The award is named in the text below it, so nothing depends on the picture. Do not use a body's real logo unless its rules allow it.
Where do the years come from?
Each award's year in AWARDS is a fixed number: an award won in 2025 stays 2025. Edit it with the rest of the entry.
How do screen readers move through it?
The block is a footer element, so at the end of the page it is the content-info landmark. The shelf has an h2 ("Recognition") and the awards are a list of four items, each read as name, category and year. The link columns sit in one nav labelled Footer, each with an h2.