shadcn.io is not affiliated with official shadcn/ui
Kudos Wall Team Block for React Aria
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.
Installation
Overview
A kudos wall for React with React Aria, written for Cobbleford, a fictional customer-success app. A compact header carries a picker for the kind of note: All, Thanks, Shipped and Helped, each with its count. Under it twelve notes sit in cells that share their hairlines, two across from sm, rail to rail and ending the block. A note shows who wrote it and who it is for (two initials avatars, and the names as its heading), its kind, the message and a cheer button: press it and the count goes up by one, press it again and it comes back down. Picking a kind moves its notes to the front and dims the others, so the wall stays whole and the block keeps its height. On a phone there is one column with six notes and a "Show all 12" button. It is built from Segment Group, Toggle, Avatar, Badge, Button and Guides with your theme's tokens. The people and notes are made up for the example.
FAQ
How do I change the notes?
Edit NOTES at the top of the file: each has a sender, a receiver, a kind, the message and how many cheers it had before the visitor arrived. The counts on the picker are counted from the list.
Do cheers get saved?
No. A cheer changes the count in the page only, so a reload starts again from the typed numbers. Wire the toggle to your own endpoint to keep them. Pressing again takes your cheer back, and every cheer button keeps one name ("Cheer") with its pressed state and count.
Why does the picker dim notes instead of hiding them?
Hiding notes would shrink the wall and move everything under it. Dimming keeps every note in place at an accessible contrast, and the picked kind's notes come first. A polite line reads the result ("Shipped first: 4 of 12 notes"). Because the order changes, an automated layout check will report the re-sort as a shift; it is deliberate.
Can I use it with the keyboard?
Yes. The picker is a segmented control you move through with the arrow keys, and each cheer is a button you press with Space or Enter. Pressed cheers are foreground on background, so the state shows without colour.