Stats & Numbers
Period Selector Stat Card
A metric card with a Day / Week / Month switch that re-renders its own figure and delta instantly, no reload and no chart library — lets one card do the work three separate stat tiles used to, with a real keyboard-operable tab switcher underneath.
$ velocityx add period-selector-stat-cardBuilt for astro.
Full docs for Period Selector Stat Card →
Needs a licence key —
subscribe here, then
velocityx loginonce.
142
4.1% upvs previous day
968
1.8% downvs previous week
4,120
12.4% upvs previous month
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| label | string | No | 'New signups' | |
| periods | StatPeriod[] | No | [ { id: 'day', tabLabel: 'Day', value: 142, delta: '4.1%', direction: 'up', compareLabel: 'vs previous day' }, { id: 'week', tabLabel: 'Week', value: 968, delta: '1.8%', direction: 'down', compareLabel: 'vs previous week' }, { id: 'month', tabLabel: 'Month', value: 4120, delta: '12.4%', direction: 'up', compareLabel: 'vs previous month' }, ] | |
| defaultPeriodId | string | No | ||
| prefix | string | No | '' | |
| suffix | string | No | '' | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/period-selector-stat-card/PeriodSelectorStatCard.astroUsing the Period Selector Stat Card component
Install it with velocityx add period-selector-stat-card.
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