Skip to main content

​
Overview

The @kuzenbo/charts package provides pre-built, accessible chart components powered by Recharts. All charts are styled to match your Kuzenbo theme and support responsive layouts out of the box.
Version 0.0.7 is currently published on npm. This package is production-ready.

​
Installation

npm install @kuzenbo/charts @kuzenbo/core @kuzenbo/theme react react-dom

​
Available Charts

Area Chart

Display trends over time with filled areas

Bar Chart

Compare values across categories

Line Chart

Show trends and patterns over time

Pie Chart

Display proportional data

Donut Chart

Pie chart variant with center hole

Radar Chart

Multi-dimensional data visualization

Scatter Chart

Plot points on X and Y axes

Bubble Chart

Scatter chart with sized bubbles

Radial Bar Chart

Circular bar chart

Funnel Chart

Visualize conversion funnels

Heatmap

Display matrix data with colors

Composite Chart

Combine multiple chart types

Sparkline

Tiny inline charts for trends

​
Usage

​
Line Chart

import { LineChart } from '@kuzenbo/charts/ui/line-chart';

const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  { name: 'Mar', value: 600 },
  { name: 'Apr', value: 800 },
  { name: 'May', value: 500 },
];

export function SalesChart() {
  return (
    <LineChart
      data={data}
      xKey="name"
      yKey="value"
      height={300}
      showGrid
      showTooltip
    />
  );
}

​
Bar Chart

import { BarChart } from '@kuzenbo/charts/ui/bar-chart';

const data = [
  { category: 'Product A', sales: 4000, revenue: 2400 },
  { category: 'Product B', sales: 3000, revenue: 1398 },
  { category: 'Product C', sales: 2000, revenue: 9800 },
];

export function ProductChart() {
  return (
    <BarChart
      data={data}
      xKey="category"
      bars={[
        { dataKey: 'sales', fill: 'hsl(var(--kb-primary))' },
        { dataKey: 'revenue', fill: 'hsl(var(--kb-secondary))' },
      ]}
      height={400}
    />
  );
}

​
Pie Chart

import { PieChart } from '@kuzenbo/charts/ui/pie-chart';

const data = [
  { name: 'Desktop', value: 400 },
  { name: 'Mobile', value: 300 },
  { name: 'Tablet', value: 200 },
];

export function TrafficChart() {
  return (
    <PieChart
      data={data}
      dataKey="value"
      nameKey="name"
      height={300}
      showLegend
    />
  );
}

​
Donut Chart

import { DonutChart } from '@kuzenbo/charts/ui/donut-chart';

const data = [
  { label: 'Completed', value: 65 },
  { label: 'In Progress', value: 25 },
  { label: 'Pending', value: 10 },
];

export function TasksChart() {
  return (
    <DonutChart
      data={data}
      dataKey="value"
      nameKey="label"
      innerRadius={60}
      outerRadius={80}
    />
  );
}

​
Area Chart

import { AreaChart } from '@kuzenbo/charts/ui/area-chart';

const data = [
  { month: 'Jan', users: 1000, sessions: 2400 },
  { month: 'Feb', users: 1200, sessions: 2210 },
  { month: 'Mar', users: 1500, sessions: 2900 },
];

export function AnalyticsChart() {
  return (
    <AreaChart
      data={data}
      xKey="month"
      areas={[
        { dataKey: 'users', fill: 'hsl(var(--kb-primary))' },
        { dataKey: 'sessions', fill: 'hsl(var(--kb-secondary))' },
      ]}
      height={300}
      stacked
    />
  );
}

​
Sparkline

import { Sparkline } from '@kuzenbo/charts/ui/sparkline';

const data = [4, 8, 5, 10, 2, 7, 9, 3, 6];

export function MiniTrend() {
  return (
    <div className="flex items-center gap-2">
      <span className="text-sm">Revenue</span>
      <Sparkline data={data} width={100} height={30} />
      <span className="text-sm font-semibold">+15%</span>
    </div>
  );
}

​
Composite Chart

import { CompositeChart } from '@kuzenbo/charts/ui/composite-chart';

const data = [
  { name: 'Jan', revenue: 4000, profit: 2400, expenses: 1600 },
  { name: 'Feb', revenue: 3000, profit: 1398, expenses: 1602 },
  { name: 'Mar', revenue: 2000, profit: 9800, expenses: 800 },
];

export function FinancialChart() {
  return (
    <CompositeChart
      data={data}
      xKey="name"
      height={400}
      lines={[{ dataKey: 'revenue', stroke: 'hsl(var(--kb-primary))' }]}
      bars={[
        { dataKey: 'profit', fill: 'hsl(var(--kb-success))' },
        { dataKey: 'expenses', fill: 'hsl(var(--kb-danger))' },
      ]}
    />
  );
}

​
Theming

Charts automatically use your Kuzenbo theme colors: 
import { PieChart } from '@kuzenbo/charts/ui/pie-chart';

// Charts use CSS variables from your theme
const colors = [
  'hsl(var(--kb-primary))',
  'hsl(var(--kb-secondary))',
  'hsl(var(--kb-accent))',
  'hsl(var(--kb-success))',
  'hsl(var(--kb-warning))',
  'hsl(var(--kb-danger))',
];

export function ThemedChart() {
  return <PieChart data={data} colors={colors} />;
}

​
Responsive Charts

All charts support responsive layouts: 
import { LineChart } from '@kuzenbo/charts/ui/line-chart';
import { useViewportSize } from '@kuzenbo/hooks';

export function ResponsiveChart() {
  const { width } = useViewportSize();
  const isMobile = width < 768;

  return (
    <LineChart
      data={data}
      height={isMobile ? 200 : 400}
      showLegend={!isMobile}
    />
  );
}

​
Dependencies

  • recharts - Charting library
  • @kuzenbo/core - UI components
  • tailwind-variants - Styling
  • tailwind-merge - Class merging

​
Peer Dependencies

{
  "@kuzenbo/core": "^0.0.7",
  "@kuzenbo/theme": "^0.0.7",
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
}

​
TypeScript

All charts are fully typed: 
import { LineChart } from '@kuzenbo/charts/ui/line-chart';
import type { LineChartProps } from '@kuzenbo/charts/ui/line-chart';

interface DataPoint {
  date: string;
  value: number;
}

const Chart: React.FC<{ data: DataPoint[] }> = ({ data }) => {
  return <LineChart data={data} xKey="date" yKey="value" />;
};

​
Next Steps

Theme

Customize chart colors

Build docs developers (and LLMs) love

Get started for freeTalk to us