Charts for Vue.
70 charts from shadcn/ui, rebuilt on TanStack Charts for Vue: area, bar, line, pie, radar and radial. Hover them, tab into them, copy the one you need. Free with an account.
Every chart
70 charts.
- Interactive Area ChartArea charts
- Interactive Bar ChartBar charts
- Interactive Line ChartLine charts
- Donut Chart with TextPie charts
- Multiple Bar ChartBar charts
- Stacked Area ChartArea charts
- Multiple Line ChartLine charts
- Multiple Radar ChartRadar charts
- Radial Chart with TextRadial charts
- Interactive Pie ChartPie charts
- Gradient Area ChartArea charts
- Stacked Bar Chart with LegendBar charts
- Horizontal Bar ChartBar charts
- Stacked Radial ChartRadial charts
- Advanced Chart TooltipTooltips
- Area ChartArea charts
Need the page around it? With Pro, your AI agent installs dashboard, stats and monitoring blocks from a prompt, charts already laid out in them.
Get ProVue charts by family
7 families, 70 charts. Each opens its charts on Vue, live, with their code.
Charts in other frameworks
The same 70 charts on every framework. React, Vue, Svelte and Solid draw them with TanStack Charts; React on Recharts keeps shadcn/ui's originals.
Pricing
Charts are free. Pro builds the rest of the page
All 70 charts are free with an account. Pro adds 6,000+ blocks, from dashboards to pricing, the Pro backgrounds, buttons, shaders and text effects, and the MCP that installs them from a prompt.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
- How many people can use the license.
- Client work, SaaS products and anything you charge for.
- Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.
- Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.
- Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.
- Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.
- Typewriters, scrambles, counters and more, for headlines, labels and numbers.
- Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.
- WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.
- One design and one theme on all four: the components, blocks and effects are built for each framework.
- React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.
- From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.
- Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.
- Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.
- Debounce, local storage, media queries and more: each hook is one typed file you own.
- From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.
- Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.
- Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.
- Priority requests are answered first.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- Seats: 1 seat
- Commercial use: Personal & open source only
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
- Seats: Up to 5 seats
- Commercial use: Included
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
- Seats: Unlimited seats
- Commercial use: Included
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Priority
Billed once a year in USD. Cancel anytime.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- How many people can use the license.Seats: 1 seat
- Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
- Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
- Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
- Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
- Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
- Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
- Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
- WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
- One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
- React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
- From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
- Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
- Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
- Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
- From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
- Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
- Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
- Priority requests are answered first.Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
- How many people can use the license.Seats: Up to 5 seats
- Client work, SaaS products and anything you charge for.Commercial use: Included
- Priority requests are answered first.Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
- How many people can use the license.Seats: Unlimited seats
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
shadcn/ui's 70 chart examples (area, bar, line, pie, radar and radial, plus nine tooltip variants), rebuilt on TanStack Charts for Vue. Each chart is a `<script setup>` single-file component: interactive state lives in a `ref` and the definition in a `computed`.
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.
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.
Yes. The data, the config and the `defineChart()` definition are the same lines in every framework, so a chart reads the same in Vue as in React. Only the component around them changes: Vue's syntax, our Vue card and select, and the kit's Vue `ChartContainer`.
Signed in, copy the chart's command: `npx shadcn-vue@latest add` with its URL. 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 Vue 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.
4.9 out of 5 from 150+ developers
Every chart. One file each.
70 charts for Vue on TanStack Charts, free with an account. With Pro, your AI agent installs the blocks around them from a prompt.
Get Pro
- Cancel anytime
- Keep what you've shipped