Dashboard Components

Ship dashboards faster with Chart.ts components. KPI cards with sparklines, trend charts, comparison bars, gauge meters, and heatmaps. All styled with Tailwind CSS, accessible, and under 15kb total. Works with React, Vue, Svelte, Solid, and Angular.

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

// Compose dashboard layouts with chart components
<div className="grid grid-cols-12 gap-4">
  <div className="col-span-8">
    <LineChart data={revenue} x="month" y="amount" className="h-64" />
  </div>
  <div className="col-span-4">
    <GaugeChart value={92} max={100} label="Uptime" />
  </div>
  <div className="col-span-6">
    <BarChart data={sales} x="region" y="total" />
  </div>
  <div className="col-span-6">
    <HeatmapChart data={activity} x="hour" y="day" value="count" />
  </div>
</div>

Features

Complete dashboard toolkit in one library
KPI cards, sparklines, gauges, trends
Consistent styling with Tailwind CSS
Responsive grid-ready components
Server-side rendering for instant load
Dark mode with one class toggle
Under 15kb for everything
Read the DocsSee DemosExamples