Metric Card with Sparkline

Pro

Hover the chart and a glowing dot snaps to your data.

heavy saas blocks metric sparkline card framer motion tabler icons react

Loading preview...

Props

Prop	Type	Default	Description
`label`	string	-	Metric label shown above the value.
`values`	number[]	-	Raw series values. Length should be at least 2.
`formatValue`	(n: number) => string	-	Pretty-print the primary value. If omitted, the last data point is shown.
`prefix`	string	-	Optional value prefix such as $.
`suffix`	string	-	Optional value suffix such as users.
`width`	number	320	SVG width in pixels.
`height`	number	84	SVG height in pixels.
`deltaPercent`	number	-	Optional explicit delta percentage. When omitted, derived from first vs last.
`stroke`	string	-	Stroke color CSS variable or hex. Defaults to chili-500.
`dates`	string[]	-	Optional dates corresponding to the values.
`statusLabel`	string	-	Optional default footer label when not hovering.