@vetaui/charts-kit

Recharts wrappers themed via @vetaui/foundations. 6 charts + a MetricCard molecule. Smooth animations, dark-mode aware, responsive containers.

Install

pnpm add @vetaui/charts-kit @vetaui/atoms @vetaui/foundations recharts

Use

import { AreaChart, MetricCard } from "@vetaui/charts";

const data = [
  { date: "Mon", users: 320, sessions: 410 },
  { date: "Tue", users: 380, sessions: 460 },
  // ...
];

<AreaChart
  data={data}
  xKey="date"
  series={[
    { key: "users", label: "Users" },
    { key: "sessions", label: "Sessions" },
  ]}
  formatY={(v) => `${v / 1000}k`}
/>

<MetricCard
  label="Monthly revenue"
  value="$24,820"
  delta={{ value: "+12.4%", direction: "up" }}
  spark={[10, 15, 12, 18, 22, 20, 28]}
/>

Catalog

| Component | Notes | | --- | --- | | AreaChart | smooth/linear curve, gradient fill, stacked option | | BarChart | vertical / horizontal layout, stacked option, rounded corners | | LineChart | smooth/linear curve, optional dots | | PieChart | donut by default + center label slot, legend | | Sparkline | tiny inline trend (area or line) for tables/cards | | RadialBarChart | KPI rings / progress dials with center label | | MetricCard | label + value + delta + sparkline tile (auto-tones from delta) |

All series accept color?: string to override the palette pick — by default they cycle through brand → accent → success → warning → danger → info, all CSS variables that re-skin with the active Veta preset.

License

MIT