For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Charts

Source you own, built on Recharts, composed from small parts, and themed with the same tokens as every other component.

Each chart is a few files copied into your app by shelf add. You import chart parts from those files, never from Recharts, so a Recharts change is fixed in one place you control. Every chart has an accessible name, works with the keyboard, and follows your light and dark themes.

Gallery

Area Chart
An area chart for trends over a range, with a soft fill under each line.
Bar Chart
A bar chart for comparing values across categories, grouped, stacked, or horizontal.
Funnel Chart
A funnel chart for drop-off through ordered steps.
9am 11am 1pm 3pm 5pm
Mon 4 12 18 14 6
Tue 5 14 22 16 8
Wed 3 11 20 19 9
Thu 6 15 25 21 10
Fri 8 18 28 24 15
Heatmap
A heatmap for intensity across two categories, as an accessible table of tinted cells.
Line Chart
A line chart for change over a range, with one or more series.
Pie Chart
A pie or donut chart for the parts of a whole, with an optional total in the middle.
Radar Chart
A radar chart for comparing a few series across the same axes.
Radial Chart
A radial chart for progress toward a goal, or a few values on concentric rings.
Sankey Chart
A sankey chart for flow between stages.
Scatter Chart
A scatter chart for how two measures relate, with optional dot size for a third.
Treemap
A treemap for sizes within a whole, as nested rectangles.
$35,000
Sparkline
A tiny line with no axes, for a table cell or a stat.

	9am	11am	1pm	3pm	5pm
Mon	4	12	18	14	6
Tue	5	14	22	16	8
Wed	3	11	20	19	9
Thu	6	15	25	21	10
Fri	8	18	28	24	15

Composition

A chart is a container for its kind, plus the shared parts from chart. Add only the parts you want. A series takes its color from color, which defaults to the first series color.

import * as Chart from "@/components/ui/chart";
import { Area, AreaChart } from "@/components/ui/chart-area";

<AreaChart aria-label="Revenue by month" data={data}>
  <Chart.Grid />
  <Chart.XAxis dataKey="month" />
  <Chart.YAxis format={{ notation: "compact", style: "currency", currency: "USD" }} />
  <Chart.Tooltip />
  <Chart.Legend />
  <Area dataKey="revenue" name="Revenue" />
  <Area dataKey="refunds" name="Refunds" color={seriesColors[1]} pattern="dots" />
</AreaChart>

Props are the same everywhere

aria-label: Required. Names the chart for screen readers.
data: An array of objects, one per point, row, or slice.
dataKey: The key in each item that holds a series' value. It also names the series in the legend and tooltip.
color: A color for one series. Use a token, such as seriesColors[1].
format: Intl.NumberFormat options, or a function, for ticks and tooltip values.
locale: The locale numbers print in. Defaults to the browser's.
curve: smooth, linear, or step, for lines and areas.
stacked: Stacks a series on the others that are stacked.
aspect: Width over height. A chart fills its container's width and keeps this shape.
hiddenSeries: Series hidden through the legend. Control it with onHiddenSeriesChange, or leave it uncontrolled.

Choosing a chart

Area Chart: Trends over a continuous range, such as revenue by month, where volume matters.
Bar Chart: Comparing values across categories, grouped, stacked, or horizontal.
Funnel Chart: Drop-off through ordered steps, such as visit, signup, purchase.
Heatmap: Intensity across two categories, such as orders by weekday and hour.
Line Chart: Change over a range where the line matters more than the area, or several series that overlap.
Pie Chart: The parts of a whole, for up to six slices, with a total in the middle of a donut.
Radar Chart: Comparing a few series across five to eight shared axes.
Radial Chart: Progress toward a goal, or a few values on concentric rings.
Sankey Chart: Flow between stages, such as visitors to signups to paid.
Scatter Chart: How two measures relate, one dot per item, with dot size for a third.
Treemap: Sizes within a whole, as nested rectangles, such as storage by folder.
Sparkline: A tiny trend beside a number, in a stat or a table row.

Theming

Charts use the same colors as everything else. Series are chart1 to chart6, which are greys by default. Tell series apart with pattern (solid, hatch, dots), or override the tokens for a colored palette. Past six series, group the smallest into Other.

import * as stylex from "@stylexjs/stylex";
import { colors } from "@/styles/shelf/tokens.stylex";

// Series colors are chart1 to chart6, greys by default. Gridlines and the hover cursor have their own tokens.
export const brandTheme = stylex.createTheme(colors, {
  chart1: "oklch(0.6 0.2 280)",
  chart2: "oklch(0.7 0.15 80)",
  chartGrid: "#dcdcf0",
});

<div {...stylex.props(brandTheme)}>
  <AreaChart … />
</div>

Accessibility

Every chart is a named group, and its plot responds to the arrow keys. The legend is a row of toggle buttons. Color is never the only signal: series differ by pattern (solid, hatch, dots, dashes) as well as shade, the legend and tooltip show the same pattern, and values are in the tooltip. For people who prefer numbers, offer a table beside the chart.

import * as Table from "@/components/ui/table";

// Offer the same numbers as a table, for people who prefer them or cannot see the chart.
<Table.Root aria-label="Revenue by month">…</Table.Root>

Limits

Data size: Charts are SVG, which is comfortable up to about 5,000 points per chart. Beyond that, aggregate the data first.
Server rendering: A chart measures its container in the browser, so the server sends an empty frame with the right shape and the chart draws on load. There is no layout shift.
Server Components: A format given as a function must be passed from a client component. Intl options work from anywhere.