shadcn.io is not affiliated with official shadcn/ui
Running Total Counter Awards Block for Radix UI
A single framed cell for a usage-metering API with one large rolling number and a row of year buttons: choosing a year rolls the running total of awards to that year and lists its three newest awards.
Installation
Overview
A year-scrubbed award counter for React with Radix UI. One framed cell, its lines overshooting into + marks, holds a row of year buttons (2021 to 2025), a very large number, a caption ("awards by 2025", with how many were won in that year) and the year's three newest awards under a hairline. Choosing a year rolls the number's digits to the running total at the end of that year, and a polite line announces it. The number rolls up once when it scrolls into view and shows its final value at once under reduced motion. It's built from Guides, Sliding Number, Toggle Group and your theme's tokens. The awards are made up for the example.
FAQ
How do I change the awards?
Edit AWARDS at the top of the file, newest first: each has a title and an ISO date ("2025-11-06"), fixed rather than computed. The years on the buttons, the running totals, the count for each year and each year's three newest awards are all worked out from the dates.
When does the number roll?
Once when it scrolls into view (trigger="view"), from zero to the latest total, and then each time you choose another year. Under reduced motion the digits change in place with no roll. It never runs on a timer.
How is a change announced?
The number itself reads as plain text. After you choose a year, a polite status line says "21 awards by 2024" so the change is spoken without moving focus; it starts empty so nothing is read on load.
Does the block change height when I pick a year?
No. The lists of newest awards for all five years are stacked unseen in one cell, so the cell is as tall as the tallest, and each list is always three rows; the number and caption keep fixed lines too.