shadcn.io is not affiliated with official shadcn/ui
Glass Trophy Case Awards Block for React
A glass trophy cabinet drawn in SVG with two shelves, eight trophies of different silhouettes and an engraved plaque under each, with the shelves, awards and programmes counted from the list.
Installation
Overview
A trophy case for React with Base UI. A centred header sits over a framed figure drawn as a glass cabinet: a cornice, a pane with a faint reflection, two shelf boards and a plinth, its corners marked with + from Guides. Eight trophies of eight different silhouettes (a cup, an obelisk, a star on a column, a globe, a lidded urn, a crystal, a flame and a shield) stand on the shelves at different heights, drawn in SVG in your theme's foreground tone and hidden from assistive technology. Under each shelf board hangs an engraved plaque with the award as a heading, the programme and the year, and a line under the cabinet counts the shelves, the awards and the programmes from the list. The awards and programmes are made up for the example: replace them with the recognition your product has actually received.
FAQ
How do I change the trophies?
Edit AWARDS at the top of the file: each has a name, a programme, a year, a shape (cup, obelisk, star, globe, urn, crystal, flame or shield) and stands, the classes that set the trophy's height at phone and wider sizes. The first four go on the top shelf and the rest on the bottom one; change SHELF_SIZE for another split.
Where does the line under the cabinet come from?
It's counted from AWARDS and SHELVES: the number of awards and shelves, the number of different programmes and the earliest year. Add an award and the line follows.
How are the trophies drawn?
Each trophy is a handful of paths in a 64 by 80 box standing on its foot line. Parts take a faint opaque fill, a darker one for the feet, or only a stroke, and strokes keep 1.25 px at any size. Tiers are told by shape and words, never by a metal colour. To add a silhouette, add a key to SHAPES and to the Shape type.
Are these real awards?
No. Every programme and product here is made up for the example, and the trophies, rosettes and medals are drawn by the block, not copied from any award body. Replace them with your own recognition, and use an organiser's official artwork only if its rules allow it.
Are the years computed?
No. Each year is fixed in the data, so an award given in 2025 stays 2025. Years are wrapped in a bdi element so they keep their order on a right-to-left page.
How does it read on a phone and with a screen reader?
Two trophies sit on each shelf board on a phone, so a shelf wraps onto two boards, and nothing scrolls sideways at 320 pixels. Each shelf is a list named for it ("Top shelf, 4 awards"); every item opens with the award as a heading, then the programme and the year. The cabinet and the trophies are hidden from assistive technology.
Related
- Pro
Laurel Display Awards
Badges and sealsA 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.
- Pro
Dense Badge Wall Awards
Badges and sealsA wall of twelve drawn award badges on shared hairlines, four across, with a tally counted from the list and a show-all button on phones.
- Pro
Class Plaques Hall of Fame Awards
People and teamsA hall of fame of seven open-source contributors in three inducted classes, each an engraved plaque with an oval monogram medallion, a one-line contribution and its class year.
- 213Pro
Three Step Podium Awards
Rankings and scoresA podium of three steps in the order 2, 1, 3, their heights in proportion to rank, a drawn medal on each and the award, programme and year above it.
- Pro
Achievement Trophy Wall Features
Metrics and chartsA wall of eight milestone badges for a language-learning app: unlocked ones solid, locked ones muted with a lock and a progress bar, a header count, and a tooltip with each unlock rule.
- Pro
Seal Row Awards
Badges and sealsA free row of six drawn award seals, each a different silhouette, with the award, its programme and the year under it, and one counted line below.