Stats & Numbers
Big Number Hero Stat
One headline figure sized to carry a section on its own, with a short annotation line underneath for context. Locale-safe number formatting (including compact '4.2M' notation) and a count-up that lands on the real value immediately for reduced-motion users.
$ velocityx add big-number-statBuilt for astro.
Full docs for Big Number Hero Stat →
Needs a licence key —
subscribe here, then
velocityx loginonce.
4.2M
Monthly active users
Up from 2.1M last year
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| value | number | Yes | ||
| prefix | string | No | '' | |
| suffix | string | No | '' | |
| compact | boolean | No | false | Uses Intl compact notation (4.2M) instead of the full number. |
| decimals | number | No | compact ? 1 : 0 | Decimal places to keep, applies to both compact and full formatting. |
| label | string | Yes | ||
| annotation | string | No | ||
| align | 'left' | 'center' | No | 'left' | |
| size | 'md' | 'lg' | No | 'lg' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/big-number-stat/BigNumberStat.astroUsing the Big Number Hero Stat component
Install it with velocityx add big-number-stat.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Stats & Numbers.
Stat band whose numbers count up when the section scrolls into view, then settle. No runtime dependency — plain Astro plus a small inline observer. Honours prefers-reduced-motion by rendering final values immediately.
astroPuts two numbers on one shared scale and calls out the delta — the proof-point shape for 'we cut your load time' or 'conversion rate before vs. after' case studies. Ships a screen-reader summary alongside the bars, so the comparison reads correctly even without the visual.
astroThe compact way to show actual-vs-target on a scorecard row: a thin fill against a qualitative poor/satisfactory/good band, with a tick marking the target, so a whole KPI reads in the space a single number used to take. Values stay in text too, so it holds up for anyone who can't read the bar visually.
astroA single large figure that counts up the moment it scrolls into view, paired with a directional change badge. No chart library, no runtime dependency — locale-safe number formatting and a permanent screen-reader value so the real number is never hidden behind the animation.
astro