Stats & Numbers
Rank Change List
A ranked leaderboard — top accounts, top pages, top reps — where every row states how far it moved since the last period in plain words alongside the arrow, so a skim of the list still tells you who's climbing and who's slipping without reading a tooltip.
$ velocityx add rank-change-listBuilt for astro.
Full docs for Rank Change List →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Top accounts this month
vs last month- Rank 1: Acme Co182,400 Up 1 place
- Rank 2: Bluewater Ltd156,200 Down 1 place
- Rank 3: Nova Supply98,100 No change
- Rank 4: Harlow Group74,300 Up 2 places
- Rank 5: Carrow & Finch61,900 New entry
| Rank | Label | Value | Movement |
|---|---|---|---|
| 1 | Acme Co | 182,400 | Up 1 place |
| 2 | Bluewater Ltd | 156,200 | Down 1 place |
| 3 | Nova Supply | 98,100 | No change |
| 4 | Harlow Group | 74,300 | Up 2 places |
| 5 | Carrow & Finch | 61,900 | New entry |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | 'Top accounts this month' | |
| rows | RankChangeRow[] | No | [ { label: 'Acme Co', value: 182400, rank: 1, previousRank: 2 }, { label: 'Bluewater Ltd', value: 156200, rank: 2, previousRank: 1 }, { label: 'Nova Supply', value: 98100, rank: 3, previousRank: 3 }, { label: 'Harlow Group', value: 74300, rank: 4, previousRank: 6 }, { label: 'Carrow & Finch', value: 61900, rank: 5 }, ] | |
| periodLabel | string | No | 'vs last month' | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/rank-change-list/RankChangeList.astroUsing the Rank Change List component
Install it with velocityx add rank-change-list.
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.
astroOne 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.
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.
astro