Skip to content
shadcn.io

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

Can people react to a note?

No. This is a wall of notes sorted by value, with no reaction buttons. For notes that can be reacted to, see the team feedback wall in the related blocks.

Are the people and notes real?

No. Corkwell, the Garnethurst Prize, the people and every note are made up for the example. Use real names only with people's permission.

  • Pro

    Kudos Wall Team

    Recognition

    Twelve 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

    A 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

    A 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 grids

    Sixteen 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 grids

    Ten 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

    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.