React Sparkline

Embed tiny sparkline charts inline with text, in table cells, or on KPI cards. SVG rendering at any size, Tailwind CSS styling, and under 1kb per sparkline. Perfect for data-dense dashboards.

$npm install @chartts/react
example.tsx
import { Sparkline } from "@chartts/react"

export function KPICard({ label, value, trend }) {
  return (
    <div className="flex items-center gap-4 p-4 rounded-xl card">
      <div>
        <p className="text-sm muted-text">{label}</p>
        <p className="text-2xl font-bold heading">{value}</p>
      </div>
      <Sparkline
        data={trend}
        className="w-24 h-8"
        lineClassName="stroke-emerald-400"
        areaClassName="fill-emerald-400/10"
      />
    </div>
  )
}

Features

Tiny inline charts (as small as 24x8px)
Line, bar, and area variants
SVG rendering at any resolution
Tailwind className on line and area
Perfect for tables and KPI cards
No axes or labels (pure data)
Under 1kb tree-shaken
Read the DocsSee DemosExamples