shadcn.io is not affiliated with official shadcn/ui
Award Shelf Footer Block for React
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 Base UI. 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.
Related
- Pro
Promise Chips Footer
Trust and complianceA footer for a privacy-first analytics tool with a wrapping row of four check-marked chips (EU data residency, No ad trackers, Open API, Export anytime) and two link columns.
- Pro
Trust Centre Tiles Footer
Trust and complianceA footer for a payments checkout whose three tiles (Security, Privacy, Compliance) share hairlines, each with an icon, a quiet Current status, one line and three links.
- Pro
Audit Table Footer
Trust and complianceA footer for a backup vault with an audit table in a framed figure (the programme, its scope, how often it is audited and a link to request the report) beneath the brand and three link columns.
- Pro
Icon Tile Grid Footer
Link gridsA footer where the tiles are the navigation: a brand cell beside six link tiles with an icon, a name and one line each, on shared hairlines, and a legal band.
- Pro
Raised Panel Dark Footer
Link gridsA footer for a spreadsheet-to-app builder that draws its weight from structure: the brand line on the page, four link groups on a raised card inside a tinted shell with a + on each corner, and a legal row.
- Pro
Stat Cells Footer
Social proofA footer for an observability tool with four stat cells (events a day, uptime, regions, rating) above the brand and three link groups, with a legal band closing the page.