Charts

Themed Recharts wrappers (Line, Bar, Area, Donut). Colors come from --chart-1..5 CSS vars.

stable client:visible

Source: src/components/ui/charts/

Rendered example — light + dark

Light

LineChart

BarChart

AreaChart

DonutChart

Dark

LineChart

BarChart

AreaChart

DonutChart

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source for the full API.

import { LineChart } from '@/components/ui/charts';

const data = [
  { month: 'Jan', prs: 8 },
  { month: 'Feb', prs: 14 },
  { month: 'Mar', prs: 11 },
];

// Colors come from --chart-1..5 CSS vars (dark-mode aware).
export function Throughput() {
  return <LineChart data={data} index="month" categories={['prs']} />;
}