shadcn.io is not affiliated with official shadcn/ui
Values Columns Wall Awards Block for React
A wall of thank-you notes in five columns, one per company value, each opening with a drawn glyph and holding three notes with their sender, receiver and month, turning into a swipe row on a phone.
Installation
Overview
A recognition wall for React with Base UI. A centred header counts the notes from the list ("15 notes, 5 values") above five columns, one for each value a prize honours: Execution, Mentorship, Vigilance, Innovation and Leadership. A column opens with a small drawn glyph (a target, two figures, an eye, a spark, a flag), the value's name and its meaning in a few words, then three thank-you notes. Each note has the message, who sent it and who got it as initials avatars with their names, and the month. The columns are divided by hairlines that run rail to rail and end the block. On a phone they become a row you swipe, the next column peeking in. It's built from Avatar, Guides and your theme's tokens, with a CSS transition for the entrance. The Garnethurst Prize, the people and their notes are made up for the example.
FAQ
How do I add a note or a value?
Edit VALUES at the top of the file. Each value has an id, a name, a meaning and a list of notes; each note has a text, a sender, a receiver and a month of 2025 as two digits. The header's tally is counted from the list. To add a value, give it a path in GLYPHS and keep five or fewer columns across.
How are the glyphs drawn?
Each is a few stroked paths in a 24 by 24 box, in your foreground colour and hidden from assistive technology. The value's name is always in text beside it.
How does it fit on a phone?
The columns line up in a row that scrolls sideways and snaps to each one, each about 85 percent of the width so the next one shows. The row is a region you can reach with the keyboard and scroll with the arrow keys. Nothing makes the page scroll sideways.
How does a note read to a screen reader?
The columns are a list; each has its value as a heading and a list of notes. A note reads as the message, then "From Marit Soderlund", "to Imre Valtonen" and the month, because the initials avatars are decorative and the names are text.
Related
- Pro
Kudos Wall Team
RecognitionTwelve kudos notes in hairline cells with a Thanks, Shipped and Helped picker that dims the rest, and a cheer button on each note that adds one to its count and takes it back.
- Pro
Kudos Tally Matrix Awards
People and teamsA peer-recognition tally for a team-culture programme: five people by four values as a ruled table, each count in a cell that gets heavier as the count grows, with a total for every person and every value.
- Pro
Kudos Composer Feed Awards
People and teamsA team-chat kudos feed in a split: a composer with a value select, a recipient field, a message and a Send kudos button at the start, and the latest six kudos at the end, with each new one added at the top.
- Pro
Category Grid Awards
Cards and gridsSixteen awards sorted into six categories on a 3 by 2 hairline grid: a drawn glyph, a derived count and the two newest awards named in each cell, the largest category outlined.
- Pro
Masonry Awards
Cards and gridsTen text-only award plaques in three CSS columns of varied heights, each with a small drawn rosette, divided by column hairlines with + marks on the top rule.
- 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.