Question 1

What are shadcn.io charts?

Accepted Answer

shadcn.io charts are 53 copy-paste Recharts components for React and Next.js — area, bar, line, pie, donut, and radar variants. Each ships as a single self-contained TSX file with a header, the chart, and a footer trend strip. Theme-aware (CSS variable colours) and built on top of shadcn/ui's `<ChartContainer>` primitive, so the visualisation flows with the rest of your design system.

Question 2

Are shadcn.io charts free?

Accepted Answer

Yes — every chart in the collection is free for personal and commercial use, no attribution required, no runtime dependency on shadcn.io. The shadcn.io Pro subscription covers premium blocks, animated backgrounds, shaders, and animated buttons. Charts stay open.

Question 3

How are shadcn.io charts different from Recharts?

Accepted Answer

Recharts gives you the primitives (Area, Bar, Line, Pie, Tooltip, Legend, Axis…). shadcn.io charts assemble them into ready-to-paste, theme-aware demo cards — title + description header, the chart with shadcn `` and ``, plus a trend-indicator footer. You get a working pattern instead of wiring axes and tooltips from scratch every time.

Question 4

Which chart should I reach for first?

Accepted Answer

For trend over time: area-simple, line-simple, bar-simple. For multi-series: area-stacked, line-multiple, bar-multiple. For composition / share: pie-donut, pie-donut-text, pie-stacked. For ranking: bar-horizontal. For multi-axis comparisons: radar-simple, radar-multiple. The interactive variants (area-interactive, bar-interactive, line-interactive, pie-interactive) add hover tooltips and time-range brushes when you need them.

Question 5

How do I install a shadcn.io chart?

Accepted Answer

Open the chart's docs page (e.g. shadcn.io/charts/area-simple) and copy the one-line `npx shadcn@latest add` command. The shadcn CLI writes the chart into `components/charts/` (or wherever your components.json points) and pulls in the shadcn `<ChartContainer>` primitive plus Recharts. Import the chart and drop it into a page.

Question 6

Can I install charts by prompting an AI agent?

Accepted Answer

Yes. The shadcn.io MCP server lets Claude Code, Cursor, Windsurf, VS Code, JetBrains, and Zed install any chart by prompt: 'install the area-simple chart into my project'. Connect the MCP once, then drop charts in by description. The CLI runs under the hood; the agent wires the chart into a real page.

Question 7

Are charts fully typed?

Accepted Answer

Yes. Every chart exports its prop types and inline data shape so TypeScript catches schema drift in your data. The shadcn `<ChartContainer>` is generic over the data row, and the per-series colours read from `--chart-1` through `--chart-5` CSS variables.

Question 8

Do charts work with Server Components?

Accepted Answer

Charts are client-side because Recharts uses ResizeObserver and the SVG primitives need browser layout. Import them inside a `"use client"` component, not a Server Component. The data fetching can stay on the server — pass the resolved data array down as a prop.

Question 9

How do chart colours work?

Accepted Answer

Each chart reads from CSS variables `--chart-1`, `--chart-2`, … `--chart-5` defined in your `globals.css`. shadcn ships sensible defaults; override them per theme to retint every chart at once. For per-chart colour, override the `chartConfig` map at the top of the file — each entry binds a series key to a label and a colour token.

Question 10

Can I customise a chart?

Accepted Answer

Yes — the entire point of copy-paste. Each chart ships as plain TSX. Restyle the header, swap the trend-indicator icon, replace the demo data with your own array, change the curve type (linear / step / monotone), tweak `` and `` props, restructure the layout. No wrappers, no black boxes.

Question 11

How do I pass real data?

Accepted Answer

Each chart defines a `chartData` constant near the top of the file. Replace it with your own array (or accept it as a prop). The shape is just `Array<{ key: string; value1: number; value2?: number; … }>`, where the keys match the `` and the series defined in `chartConfig`.

Question 12

Can I switch a chart from light to dark mode?

Accepted Answer

Charts inherit colours from the standard shadcn/ui design tokens — switch theme, charts follow. Toggle the `.dark` class on `:root` (or use `next-themes`) and the chart's background, axis labels, tooltips, and series colours flip together.

Question 13

What stack do shadcn.io charts use?

Accepted Answer

React 19 + Next.js 16 + Recharts (the only runtime dep) + shadcn/ui's `<ChartContainer>` primitive + Tailwind CSS + TypeScript. No other dependencies. Recharts is the single library — charts compose its primitives directly, no wrapping.

Question 14

Do charts ship with dark mode?

Accepted Answer

Yes — every chart reads from CSS variables that flip on the `.dark` class. Use `next-themes` or your own toggle. Charts don't need a darkMode prop; they just inherit. Tooltips, axes, legends, and series colours all resolve through the design tokens.

Question 15

Are charts accessible?

Accepted Answer

Recharts ships with reasonable a11y defaults — keyboard focus on data points, screen reader announcements on tooltip hover. The shadcn `` adds an `aria-label` and `role`. For complex visualisations, pair the chart with a data table (e.g. ``) so users with assistive tech can read the underlying numbers.

Question 16

Can I use charts in commercial projects?

Accepted Answer

Yes — charts ship under an MIT-style permissive license, no attribution required, no per-seat fee, no runtime dependency on shadcn.io. Full license terms at /license.

React Chart Components for shadcn/ui.

Area Chart

Every chart, grouped by family

Every chart. One prompt away.

Grab your MCP URL

Paste into your editor

Prompt as usual

Frequently Asked Questions