shadcn.io is not affiliated with official shadcn/ui
Kudos Tally Matrix Awards Block for React
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.
Installation
Overview
A kudos tally for React with Base UI. The compact header counts the month from the table ("247 kudos in March") above one native table ruled in hairlines from rail to rail, which ends the block. Its rows are five people ranked by the kudos they received, ties broken by name; its columns are four values (Reliability, Impact, Growth, Teamwork) and a total, and a foot row adds up each value. Every count sits in a cell whose weight steps from bare to solid with the count, and the number is written in every cell, so weight never carries the meaning alone. On a phone the table scrolls sideways in a focusable region and the person column stays in place. It's built from Avatar, Guides and your theme's tokens, with a CSS transition for the entrance. The Larchstead Guild, the people and their kudos are made up for the example.
FAQ
How do I change the people and the counts?
Edit PEOPLE and VALUES at the top of the file. Each person has a name, a team and a kudos count for each value. Everything else is counted from that list: the totals, the ranking, the foot row and the figure in the header, so they can't disagree with each other.
How is a cell's weight chosen?
By the count's share of the busiest cell in the table, in five steps from no fill to a solid foreground cell with light text. The thresholds are in stepOf. The steps are solid mixes of your foreground colour, so the table follows the theme in light and dark and never uses a brand or status colour.
How are people ranked?
By their total, highest first, and a tie goes to the name that comes first. The rule is printed under the table, and RANKED is the one place that sorts the list.
How does it read to a screen reader?
As a table with a caption, column headers and the person as the row header, so each count is read with its person and its value. The avatars are decorative and hidden. The heavier cells are only a visual aid: the count is in every cell as 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
Values Columns Wall Awards
People and teamsA 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.
- 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
Judges Score Table Awards
Rankings and scoresA score sheet for a judging platform: five judges as columns with initials avatars, five weighted criteria as rows, the highest and lowest score of each row outlined, and weighted averages in the foot.
- Pro
Total Tally Awards
Lists and tablesA scoreboard table for an accounting app: years down the side, the three tiers (grand prize, winner, finalist) and a total across, with column totals in the foot row, all counted from one list of entries.
- Pro
Category Counts Awards
Charts and figuresNine count tiles on shared hairlines for a sports-league manager: a drawn category glyph, the count in large type, its share of all awards and a bar scaled to the largest, with the largest outlined.