shadcn.io is not affiliated with official shadcn/ui
Counted Award Cells Team Block for React
Four 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.
Installation
Overview
A scoreboard of recognition for React with Base UI, written for Trevanion, a fictional bike-share network. A centred header says how many thank-yous were given in Year 4 (counted from the four categories). Under it four cells stand apart, each with its own + marks and a little overshoot: a drawn mark and the award's name, the number given this year rolling up once as the cell scrolls into view, who gives it ("Crews vote", "Riders nominate", "Managers pick", "Anyone can give it"), and under a hairline the latest winner with an initials avatar, name and role. Four across from lg, two by two below. It reads as a scoreboard of who gives recognition rather than a trophy case. It is built from Sliding Number, Avatar and Guides with your theme's tokens. The people are fictional and the figures are example data.
FAQ
How do I change the categories and counts?
Edit CATEGORIES at the top of the file: each has a label, how many were given, who gives it, the latest winner and the shape of its mark. The total in the heading is the sum of the four counts, so it never disagrees with the cells.
What moves, and what happens with reduced motion?
Each number rolls up once, when its cell scrolls into view, and the cells fade up once on load. With reduced motion the numbers are simply there and the transitions are off. The width of each number is reserved from its final value, so nothing shifts while it counts.
How is it read by a screen reader?
Each cell is a description list: the category name, "Given this year" with the count, who gives it, and "Latest winner" with the name and role. The drawn marks and the avatars are hidden from assistive technology because the same facts are in text.
How does it fit on a phone?
The cells go two by two. The role under a winner wraps, and every cell keeps the winner on the same line as its neighbour, because the winner sits at the foot of a cell that stretches to the row's height.
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
Animated Counter Team
Numbers and historyA short strip of four centred people figures that roll up once as they scroll into view, over a closing row with the newest eight people as initials.
- Pro
Badge Tracker Team
RecognitionOne person's eight badges in hairline cells, earned ones solid and locked ones dashed outlines, beside the person and a bar to the next badge: 7 of 10 reviews to Reviewer II.
- Pro
Stats Overview Team
Numbers and historyFour people figures with their change on a year ago, over seven department rows whose bars draw what each department was a year ago and what it has added since.
- 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
Class Plaques Hall of Fame Awards
People and teamsA 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.