shadcn.io is not affiliated with official shadcn/ui
Kudos Wall Team Block for React
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 Base UI, 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.
Related
- 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
Feedback Themes Team
Learning and mentoringWhat one person heard in a review cycle: three themes as rows with a count and a bar as long as the count, and the two latest notes in a collapsible, on a split with a solid divider.
- Pro
Counted Award Cells Team
RecognitionFour award categories as cells apart with overshoot: a drawn mark, a count that rolls up once, who gives the award, and the latest winner under a hairline.
- Pro
Department Quote Wall Team
Culture and valuesFour departments of a farm-lease marketplace as bands: each names its department and headcount at the start and gives one display quote from someone in it at the end, split by a solid divider.
- Pro
Cohort Slider Team
Culture and valuesForty-three people of a payroll service by the year they joined: a slider labelled The year you joined, a group of avatars for who came that year, and two quotes from that year in cells split by a hairline.
- Pro
Votes FAQ
Votes and reactionsA community FAQ for a product forum: six accordion rows with a vote rail at the start of each, an up arrow, a score and a down arrow, one vote per answer that can be taken back.