shadcn.io is not affiliated with official shadcn/ui
Class Plaques Hall of Fame Awards Block for React
A 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.
Installation
Overview
A hall of fame for React with Base UI. A start-aligned header carries a tally counted from the list, then three classes of inductees, newest first, each under its own band: a hairline across the page with + marks, the class as a heading and a count. Under a band the inductees are engraved plaques in cells set apart, with lines that run a little past the corners: a drawn oval medallion holding the person's monogram (no portrait), their name, one line on what they gave the project and "Class of 2025". Each class is an ordered list. On a phone the first two classes show and one button, "Show all 7 inductees", reveals the last; two across from md, three from lg. The names, the project and the guild are made up for the example; use real inductees only with their consent.
FAQ
How do I change the inductees?
Edit CLASSES: each class has a fixed year and a list of inductees, each with a name and a contribution. The header's tally, every class's count and the button's label are counted from it. The monogram is the first letters of the first and last names.
Where do portraits go?
The medallion is a drawn oval with initials, so the block has no photos to host. To use a portrait, put an img with an empty alt inside the medallion and keep the name as the heading.
How does the Show all button work?
On phones only, the first two classes show and the button reveals the last. It reports aria-expanded and aria-controls, has a constant label, and can be operated by keyboard. From md every class shows and the button is gone.
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.
Related
- Pro
Glass Trophy Case Awards
Themed formatsA 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.
- 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
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
Awards Table Team
RecognitionA table of eight awards for a field-notes app: the winner, the category with a small drawn mark, the company year, and a button that opens the citation in place under the row.
- Pro
Roster Wall About
Team and leadersA roster wall for a team-chat company: twenty-four first-name cells in hairlines, the join year on hover, focus and tap, and a show-all control on a phone.
- 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.