Back to elements
ElementData DisplayFree

Sparkline Stat React component

A KPI card with a sparkline: the number counts to its new value, a change badge says how far it moved, range tabs swap the series with a redraw, and scrubbing the chart turns the headline into that point's value.

When to use the Sparkline Stat component

Use Sparkline Stat for the numbers at the top of a dashboard, where a trend matters as much as the current value: revenue, signups, latency, churn. People can scrub the line to read any point without opening a full chart.

Set invertDelta for metrics where a drop is good news, so the badge only turns coral when things get worse.

Installation

Add the Sparkline Stat component to your project with the shadcn CLI. It lands in components/sparkline-stat.tsx as plain React + Tailwind CSS source you own and can edit.

Install
Copied!
npx shadcn@latest add https://reactframe.com/r/sparkline-stat.json

Or copy the source by hand and install its dependencies:

Install
Copied!
npm install motion clsx tailwind-merge

Props

<SparklineStat /> accepts 16 props, all optional.

  • label
    string
    Default: "Revenue"
  • data

    Points for a single series. Use periods for switchable ranges instead.

    number[]
  • labels
    string[]
  • periods

    Switchable ranges (7D / 30D / 90D ...), shown as tabs.

    { label: string; data: number[]; labels?: string[] }[]
  • defaultPeriod
    number
    Default: 0
  • format
    "number" | "currency" | "percent" | "compact"
    Default: "currency"
  • currency
    string
    Default: "USD"
  • decimals
    number
  • locale
    string
    Default: "en-US"
  • deltaLabel

    Text after the change, e.g. "vs last week". Defaults to the period.

    string
  • invertDelta

    For metrics where going down is good (churn, latency): flips which direction is highlighted.

    boolean
    Default: false
  • variant
    "line" | "area"
    Default: "area"
Show all 16 props
  • chartHeight
    number
    Default: 72
  • interactive

    Scrub the chart to read any point; the headline follows.

    boolean
    Default: true
  • theme
    "dark" | "light"
    Default: "dark"
  • className
    string

FAQ

What does the change badge compare?
The shown value against the first point of the range. While scrubbing it compares the hovered point instead, so you can read how far it had moved by then.
Can I switch between ranges?
Pass periods with a label and data for each (7D, 30D, 90D ...). The tabs swap the series, the line redraws and the headline counts to the new value.
Is the chart accessible?
It's a focusable slider: arrow keys step through the points and screen readers hear each point's label and formatted value. Escape goes back to the latest value.

Related components

Checklist
Free
Basic Carousel
Free
Icon List
Free
Calendar
Free
Icon Box
Free
Tag Input
Free