shadcn.io is not affiliated with official shadcn/ui
Big Numbers Awards Block for Vue
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 Vue with Ark 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.