Charts

Sparkline

A tiny inline trend line with no axes, for stat cards and table cells. Fills its container unless you give it a width.

Usage

Use it for:

  • A trend next to a number in a stat card or a table cell.

Avoid it when:

  • People need exact values or axes: use LineChart.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

In a stat card

Savings
$8,240
Up +3.1%
Values: 6900, 7010, 7080, 7200, 7150, 7400, 7520, 7610, 7800, 7900, 8100, 8240

Tones and full width

Values: 90, 84, 88, 70, 64, 66, 52, 48, 50, 41Values: 12, 14, 13, 15, 15, 14, 16, 15, 15, 16

API Reference

Sparkline

PropTypeDefault
data
number[]
tone
"neutral""accent""success""warning""danger""info"
"accent"
width
number
height
number
28
label
string
area
boolean
true
valueFormat
(value: number) => string
String
className
string
style
CSSProperties
id
string

Accessibility

No keyboard interaction: a sparkline is an inline image, not a tab stop (so it does not add a tab stop to every table row).

ARIA and semantics:

  • role="img" named by label; say the trend in the label ("rising", "falling").
  • Its values are a hidden description (aria-describedby).
  • Put the current number next to it (e.g. in a Stat); color only reinforces the tone.
  • The draw-in animation is off under reduced motion.
© 2026 Motion. Internal documentation.