ikui

Command Palette

Search for a command to run...

Chart

Recharts-based chart primitives (container, tooltip, legend) with theme-aware colors. Compose bar, area, line, pie, radar, and radial charts from a single config.

Recharts-based chart primitives with theme-aware colors. ChartContainer provides the responsive wrapper and maps your ChartConfig to CSS color variables (--color-<key>); ChartTooltip, ChartTooltipContent, ChartLegend, and ChartLegendContent cover the surrounding chrome. Compose the chart body itself from Recharts elements (Bar, Area, Line, Pie, Radar, …).

Installation

One-time setup: add the @ikui registry to your components.json.

components.json
{
  "registries": {
    "@ikui": "https://ik-ui.pages.dev/r/{name}.json"
  }
}

Then install the component:

pnpm dlx shadcn@latest add @ikui/chart

Usage

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/chart";
import { Bar, BarChart, XAxis } from "recharts";
const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

<ChartContainer config={chartConfig}>
  <BarChart data={chartData}>
    <XAxis dataKey="month" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
  </BarChart>
</ChartContainer>

Examples

Multiple bars

Plot several series side by side — each Bar maps to a chartConfig key and pulls its color from the matching --color-<key> variable.

Gradient area

An AreaChart filled with an SVG linearGradient referencing the series color, for a soft trend surface.

Line with forecast

A ComposedChart layering a Line over a patterned Area to highlight a projected trend, with a legend driven by ChartLegendContent.

Donut with center label

A PieChart with innerRadius and an active Sector, using a Label to render a total in the middle.

Radar

A RadarChart over a PolarGrid, filled with a gradient and a glow filter to compare values across categories.

Radial bars

A RadialBarChart rendering each series as a concentric arc, with gradient fills and a legend.