shadcn.io is not affiliated with official shadcn/ui
Values Columns Wall Awards Block for Ark UI
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 Ark 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.