Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Kudos Tally Matrix Awards Block for Svelte

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.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A kudos tally for Svelte with Ark 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.

What happens on a phone?

The table keeps a minimum width and scrolls sideways inside a region you can reach with the keyboard, with the person column fixed at the start. The avatars hide to give the names room. Nothing makes the page scroll sideways.

Are these real people and a real programme?

No. The Larchstead Guild, Gratia and every person are made up for the example, and the kudos counts are invented. Swap in your own, with people's permission.

All 137 awards blocks