KPI Cards

Dashboard KPI cards with sparklines, percentage change, and trend indicators.

Revenue Trend

Completion

Code

example.tsx

import { Sparkline, GaugeChart } from "@chartts/react"

function KPICard({ label, value, trend, sparkData }) {
  return (
    <div className="p-6 rounded-xl bg-white dark:bg-zinc-900 border">
      <p className="text-sm text-zinc-500">{label}</p>
      <p className="text-2xl font-bold">{value}</p>
      <Sparkline data={sparkData} className="mt-2" />
    </div>
  )
}

← All examples