Charts for every framework.

70 charts: area, bar, line, pie, radar and radial, plus nine tooltip variants. Each is one file with its data, its config and the card around it, so you paste it in, swap the rows for yours and keep the rest.

They're shadcn/ui's chart examples, with the same titles, data, config keys and `--chart-1` to `--chart-5` colors. shadcn/ui draws them with Recharts, which is React only. We redrew each one on TanStack Charts so it runs in React, Vue, Svelte and Solid, and kept the Recharts version for React, on our `chart` component.

Yes. Every chart is free to use in personal and commercial projects. Seeing the code and installing it takes a free account, one tap with Google or GitHub. Pro is the site's paid plan for blocks, the Pro collections and the MCP; you don't need it for charts.

Each chart is an SVG with `role="img"`, a `chart` role description and an accessible name: the card's title, passed as `ariaLabel`. It takes keyboard focus: Tab into it, the arrow keys move between points, Home and End jump to the ends, Escape closes a pinned tooltip. The tooltip is a polite live region, so a screen reader reads the focused values, and `ariaDescription` adds context beyond the title. Under reduced motion, updates snap into place.

React, Vue, Svelte 5 and Solid, all on TanStack Charts, and React on Recharts too. Pick the framework and the library at the top of a chart's page: the preview, the code and the install command follow them.

One grammar in four frameworks. A TanStack chart is a `defineChart()` definition: marks, scales and guides as plain data that every adapter renders. So a chart's data, config and definition are the same lines in React, Vue, Svelte and Solid, and only the component around them changes. It draws SVG, follows its container's width, and owns focus, the keyboard and the tooltip.

In Vue, Svelte or Solid, TanStack Charts: Recharts is React only. In React, both draw the same 70 charts. Pick Recharts when your app already uses it or shadcn/ui's `chart` component: you compose JSX (`<AreaChart>`, `<XAxis>`, `<Tooltip>`). Pick TanStack Charts when you want the same chart code across frameworks, or a chart described as data you can build and test outside a component.

Signed in, copy the chart's command: `npx shadcn@latest add` with its URL (`shadcn-vue` and `shadcn-svelte` for those ports). It adds the chart to `components/charts`, the `tanstack-chart` kit to your ui folder, and `@tanstack/charts`. Import the chart and render it.

`@tanstack/charts` (the scales, the polar marks and the React adapter are its subpaths) and `tanstack-chart`, a small kit with `ChartContainer`, `ChartTooltipContent` and `ChartLegend` that mirrors shadcn/ui's chart parts. The card around each chart is our `card` component; the interactive ones use our `select` or buttons too.

Not the charts themselves: the MCP server installs components, blocks and icons, and it has no chart tools. Copy a chart's command from its page and your agent can run it like any other. With Pro, the MCP installs the cards, selects and dashboard blocks you put the chart in.

Each chart's `chartConfig` gives every series a `label` and a `color`, `var(--chart-1)` to `var(--chart-5)` by default. `ChartContainer` writes them as `--color-<key>` variables, and the marks paint with `var(--color-desktop)`. Change a config entry to recolor one chart, or the `--chart-N` tokens in your theme to recolor all of them.

Yes. The `--chart-N` tokens have a light and a dark value in your theme, so the series switch with the `.dark` class and nothing in the chart changes. For a color of your own in each mode, give a config entry `theme: { light, dark }` in place of `color`. Tick labels, grid lines and the tooltip use `muted-foreground`, `border` and `background`, set by the container's classes on the SVG.