Content & Dashboard

Stat Tile with Trend Arrow and Sparkline

KPI tile with a trend arrow and a hand-drawn inline SVG sparkline computed from a numbers array, no chart library.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add stat-tile-trend-sparkline

Built for react. Needs react already installed as a peer dependency. An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.

Full docs for Stat Tile with Trend Arrow and Sparkline →

Needs a licence key — subscribe here, then velocityx loginonce.

react v1.0.1 react

Stat Tile with Trend Arrow and Sparkline

Weekly signups

1,842↑ +9.6%

Props

Name	Type	Required	Default	Description
label	string	No	'Weekly signups'
value	string\|number	No	'1,842'	the big headline figure
data	number[]	No	DEFAULT_DATA	series to draw, left to right
deltaLabel	string?	No	'+9.6%'
deltaDirection	'up' \| 'down' \| 'flat'	No	'up'
width	number	No	120
height	number	No	36
className	string	No	''

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/stat-tile-trend-sparkline/StatTileTrendSparkline.jsx

Using the Stat Tile with Trend Arrow and Sparkline component

Install it with velocityx add stat-tile-trend-sparkline. 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.

All 406 components

Stat Tile with Trend Arrow and Sparkline

Props

File this creates

Using the Stat Tile with Trend Arrow and Sparkline component

Related components