Sparkline React chart component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Sparkline is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import Sparkline from @/components/ui/sparkline.

import { Sparkline, SparklineWithValue } from "@/components/ui/sparkline"

const revenue = [8200, 8650, 8400, 9100, 9480, 9230, 10150, 10600, 10380, 11420, 11900, 12480]

export function ClientRow() {
  return (
    <div className="flex items-center justify-between gap-3">
      <span className="text-sm font-medium">Tech Solutions Inc.</span>
      <Sparkline
        data={revenue}
        valueFormat="currency"
        locale="en-US"
        label="Revenue, last 12 weeks"
        interactive
      />
      <SparklineWithValue
        data={revenue}
        type="area"
        valueFormat="currency"
        locale="en-US"
        layout="responsive"
        min={0}
        max={16000}
      />
    </div>
  )
}

Props

• data*
  (number | null)[] | { value: number | null; label?: string; date?: string }[]

  The values, oldest first. Rows can carry a label ("Week 39") or an iso date for the readout; null leaves a gap in the line.

• typedefault "line"
  "line" | "area" | "bar" | "win-loss"

  line, line over a soft fading fill, bars from zero, or win-loss: equal ticks up for positive and down for negative values (streaks, daily goals). Bars fall back to a line above 120 points.

• widthdefault 96
  number

  Width in px. 0 fills the container (the parent needs a width, e.g. a grid cell or a flex-1 box).

• heightdefault 28
  number

  Height in px. 28 reads well in a phone row; 16 sits inside a line of text.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The stroke and fill color. neutral is the ink (black in light mode, white in dark mode).

• colordefault ""
  string

  Any CSS color, a palette slot ("series-3") or a tone name. Replaces tone and trendColor.

• trendColordefault false
  boolean

  Color by the direction from the first to the last value: success when it rose, danger when it fell, the ink when flat. Win-loss paints wins green and losses red.

• invertTrenddefault false
  boolean

  Down is good (costs, churn, response time): a fall turns green under trendColor and reads as positive (data-intent).

• curvedefault "monotone"
  "monotone" | "linear" | "natural" | "step"

  How the line joins the points. monotone never overshoots a value; step suits counts that jump.

• strokeWidthdefault 1.5
  number

  Line width in px, with round caps and joins.

• showLastdefault true
  boolean

  A 5px dot on the last point, ringed in the surface color. For bars, the last bar keeps the full color and the others soften.

• showMinMaxdefault false
  boolean

  Small hollow dots at the lowest and the highest point (bars: those bars in full color).

• referencedefault "none"
  "none" | "first" | "average" | "zero"

  A dashed hairline at the first value, the average or zero (zero widens the range to include it).

• surfacedefault ""
  string

  The color behind the sparkline, used for the rings around dots. Empty is the surface token.

• min
  number

  Lower bound of the value range; the data's minimum when unset. Share min and max across the rows of a table so the sparklines compare.

• max
  number

  Upper bound of the value range; the data's maximum when unset. The Clients table example shares one range across rows.

• interactivedefault false
  boolean

  Focusable and inspectable: hover, tap, drag or arrow keys show each point in a compact readout pinned above the sparkline.

• activeIndex
  number | null

  The inspected point, controlled (with onActiveIndexChange), so a value next to the sparkline can follow the scrub.

• defaultActiveIndexdefault "null"
  number | null

  The inspected point on mount, uncontrolled; null starts with no readout. Needs interactive.

• onActiveIndexChange
  (index: number | null) => void

  Called when a point is inspected or the readout clears.

• valueFormatdefault "number"
  ChartValueFormat = "number" | "compact" | "currency" | "percent"

  How values print in the readout and the accessible summary ("$12,480" with currency and en-US).

• currencydefault "USD"
  string

  ISO 4217 code for valueFormat="currency", printed with its narrow symbol.

• formatValue
  (value: number, context: "tooltip" | "label" | "value") => string

  Full control over printed values, e.g. v => `${v} orders`.

• localedefault ""
  string

  Intl locale for values and dates. Empty follows the UIProvider, then the page.

• labeldefault ""
  string

  The accessible name, e.g. "Revenue, last 12 weeks". A summary of the first and last value and the change is appended.

• animateddefault true
  boolean

  Draws in the first time it scrolls into view (0.6s), the last dot pops in after it; data changes glide either way. Off under reduced motion.

• labels
  { summary?: (first: string, last: string, change: string) => string; empty?: string; point?: (index: number, count: number) => string; inspectHint?: string }

  Screen reader strings. Defaults "from {first} to {last}, {change}", "No data", "{n} of {count}" and the arrow-key hint. Pass only the keys you translate.

• classNames
  Partial<Record<"svg" | "line" | "area" | "bar" | "last" | "reference" | "tooltip", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root, e.g. "align-[-0.2em]" inside text. Other props (id, data-*, aria-*, events) spread onto the root span.

Parts

FAQ

Used in

More React chart and stat components