Cards & Expandables
Stat Trend Card
A single-metric KPI tile for a dashboard grid — big number, an auto-coloured up/down delta pill, and an optional inline sparkline so the direction reads at a glance. No chart library, pure inline SVG.
$ velocityx add stat-trend-cardBuilt for astro.
Full docs for Stat Trend Card →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Weekly active users
12,480
+12.4%vs last week
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| label | string | Yes | ||
| value | string | number | Yes | ||
| delta | number | No | Signed percentage (or absolute) change. Sign decides the colour + arrow unless `direction` overrides it. | |
| deltaLabel | string | No | Pre-formatted delta string, used instead of deriving one from `delta` (e.g. "+12.4%"). | |
| deltaPeriod | string | No | ||
| direction | 'up' | 'down' | 'flat' | No | ||
| trend | number[] | No | [] | |
| icon | 'astro' | 'none' | No | ||
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/stat-trend-card/StatTrendCard.astroUsing the Stat Trend Card component
Install it with velocityx add stat-trend-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 Cards & Expandables.
Two options side by side for an A-vs-B decision point — plan tiers, old-vs-new, build-vs-buy — stacking on mobile, with one card raised and badged as the recommended pick.
astroA learning-dashboard tile showing course title, lesson completion as both a bar and a written count, time remaining, and a resume action — built for a "continue where you left off" rail.
astroA content-offer tile for a resource library or lead-magnet grid — file type badge, title, short description, locale-formatted size, and a download action. Built for a standalone promotional grid, not a stacked attachment list.
astroA listing row for a meetup, webinar or conference session — a prominent day/month date block, title, location and time, with a one-click add-to-calendar download that generates a real .ics file by hand. No calendar SDK, works even with JS disabled.
astro