ChartKit - Lightweight charts for React & Next.js

$npm install @derpdaderp/chartkit

See it in action

Real components. Real themes. Try switching themes in the header.

Beautiful by default. Every chart looks polished out of the box. No design skills required.

Incredibly light. ~15KB gzipped with zero dependencies. Just React.

TypeScript first. Full type safety with autocomplete for every prop.

17 curated themes. Dark and light themes inspired by Vercel, GitHub, Linear, and more.

LLM-ready. llms.txt included for AI-assisted development.

Simple API, powerful results

Get a beautiful chart with just a few lines of code.

MyDashboard.tsx

import { LineChart, KpiCard } from '@derpdaderp/chartkit';

export function Dashboard({ data }) {
  return (
    <div>
      <KpiCard
        label="Revenue"
        value={284500}
        delta={12.5}
        data={data}
        theme="midnight"
      />
      
      <LineChart
        data={data}
        series={[{ key: 'value', label: 'Sales', area: true }]}
        theme="midnight"
        curve="monotone"
      />
    </div>
  );
}