shadcn.io is not affiliated with official shadcn/ui
Big Numbers Awards Block for React
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.
Installation
Overview
Four giant award figures for React with Base UI: awards won, programmes, categories led and years running. They sit in cells that share their hairlines, four across from lg and two by two below, ending the block under the page's top rule. Each cell has the figure at display size, a one-line definition and a footnote that names what it was counted from (the latest award, the programmes, the categories, the span of years). The figures count up once when they scroll into view and show their final value at once under reduced motion. It's built from Guides, Counting Number and your theme's tokens. The awards and programmes are made up for the example.
FAQ
How do I change the numbers?
Edit AWARDS at the top of the file: each award has a programme, a category, a title and a fixed year. The four figures and their footnotes are counted from that list (a distinct count of programmes and categories, and the span from the first year to the last), so you never type a total.
When do the figures count?
Once, when the cells scroll into view, from zero to the value. Under reduced motion they show the final number at once. A screen reader reads the final value, never the count.
What do the footnotes say?
What each number was counted from: the newest award, the names of the programmes, the names of the categories and the years covered. They change when the list does.
Can I add a fifth figure?
Add an entry to FIGURES with a label, a value and a footnote. The grid is two columns on a phone and four from lg, so a fifth would leave an empty cell: remove one, or change the columns to match.
Related
- Pro
Split Stats Awards
Charts and figuresA split for an analytics tool: three figures at the start (awards won, a selection rate like 1 in 60 and years running) and Recent highlights at the end, an ordered list of the four newest awards with a small drawn mark each.
- Pro
Running Total Counter Awards
Charts and figuresA 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.
- Pro
Count By Year Awards
Charts and figuresA 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
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.
- Pro
By The Numbers Bento About
NumbersAn asymmetric bento of company figures for an expense tool: a lead cell with the customer count over a twelve-bar trend, and five smaller cells tagged People, Customers or Product, each footnoted with how it was counted.
- Pro
Trend Sparkline Leaderboard Stats
LeaderboardsA podcast chart in a reverse split: eight shows ranked by this week's listeners, each row with a line of its last eight weeks, the value and the change on last week as an arrow and a sign.