React Dashboard Charts

Build production dashboards with Chart.ts. Line charts for trends, bar charts for comparisons, sparklines for KPIs, gauges for health metrics, and heatmaps for activity. All styled with Tailwind CSS and under 15kb total.

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

export function Dashboard() {
  return (
    <div className="grid grid-cols-4 gap-4">
      {/* KPI cards with sparklines */}
      <KPICard label="Revenue" value="$128k" trend={revenueData} />
      <KPICard label="Users" value="12.4k" trend={userData} />
      <KPICard label="Uptime" value="99.9%" trend={uptimeData} />
      <KPICard label="NPS" value="72" trend={npsData} />

      {/* Main charts */}
      <div className="col-span-3">
        <LineChart data={revenue} x="month" y="amount" className="h-72" />
      </div>
      <div className="col-span-1">
        <GaugeChart value={73} max={100} className="h-72" />
      </div>
    </div>
  )
}

Features

Complete dashboard chart toolkit
KPI sparklines, gauges, trend charts
Consistent Tailwind CSS styling across charts
Server-side rendering for instant display
Responsive grid layouts
Dark mode with a single class toggle
Under 15kb for all chart types
Read the DocsSee DemosExamples