Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Running Total Counter Awards Block for React

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.

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 year-scrubbed award counter for React with Base 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.

How do I add a year?

Add awards with that year in their date. A new year gets its own button and its own list, and the buttons wrap onto a second line on a narrow phone. Keep at least three awards per year so every list has three rows.

Are these real awards?

No. Elowen and its awards are made up. Replace the list with your own.

  • Pro

    Big Numbers Awards

    Charts and figures

    Four display-size figures for an inventory-counting app on shared hairlines (awards won, programmes, categories led and years running), counted up once on view and all derived from one typed list of awards.

  • Pro

    Growth Staircase Awards

    Charts and figures

    A reverse split for a garden-centre till system: a framed staircase chart of the running total of awards by year with the three biggest years marked, beside the header and a list of three facts.

  • Pro

    Count By Year Awards

    Charts and figures

    A split for a flood-risk analytics tool: a header and a toggle at the start and, at the end, a ruled list of years from 2019 to 2025, each a horizontal bar and its count, counting either awards or programmes.

  • Pro

    Year In Review Awards

    Charts and figures

    A recap of 2025 for a podcast app: a 2025 compared with 2024 description list of four figures with their change in words, a ranked list of the top three awards with drawn seals and three dated milestones.

  • Pro

    Year Rail Timeline Awards

    Timelines

    A vertical rail of awards by year for a planning tool, a node for each year on a solid hairline with its awards as rows, and the older years behind a View earlier years Collapsible.

  • Pro

    Realtime Order Counter Stats

    Live

    A shop's orders-today figure that ticks forward at a fixed pace, with a count of orders since the page opened and a pause control.

All 137 awards blocks