Charts that feel alive.

Scatter charts

Page weight and load timeLargest contentful paint (LCP) for 20 pages. The dashed line is the 2.5 s target.

Page weight and largest contentful paint
Page	Page weight	LCP (s)
/	1.48 MB	2.4
/pricing	0.92 MB	2.3
/docs	0.76 MB	1.5
/docs/installation	0.69 MB	1.4
/docs/components/table	1.18 MB	2.2
/docs/components/chart	1.64 MB	2.2
/blog	1.32 MB	2.3
/blog/release-notes-2-0	2.24 MB	3.6
/blog/design-tokens	1.87 MB	2.4
/changelog	0.84 MB	1.6
/about	1.05 MB	1.4
/careers	1.41 MB	1.7
/contact	0.61 MB	1.2
/login	0.48 MB	1.6
/signup	0.56 MB	1.3
/dashboard	1.96 MB	3.9
/dashboard/settings	1.22 MB	2.1
/templates	2.58 MB	3.4
/showcase	3.12 MB	4.8
/legal/privacy	0.39 MB	0.9

Scatter

MarketsGrowth and retention by country. Bubble area shows annual revenue.

Europe
Americas
Asia

Market growth, retention and revenue
Market	Region	Growth (%)	Retention (%)	Revenue ($M)
Germany	Europe	8	82	24
France	Europe	5	76	14
Spain	Europe	12	71	6
Canada	Americas	10	85	11
Brazil	Americas	21	64	9
Mexico	Americas	17	69	5
Japan	Asia	4	88	19
India	Asia	26	61	8

Bubble

Ad spend and signups

Week
Trend, 95% band

Weekly ad spend and signups
Week	Ad spend	Signups
Week of Jul 6	$6,200	184
Week of Jul 13	$8,900	236
Week of Jul 20	$12,400	229
Week of Jul 27	$14,800	347
Week of Aug 3	$17,500	318
Week of Aug 10	$21,300	412
Week of Aug 17	$23,600	386
Week of Aug 24	$27,100	503
Week of Aug 31	$30,400	462
Week of Sep 7	$33,800	571
Week of Sep 14	$37,900	604
Week of Sep 21	$41,600	588

Scatter with trend

Install
Your data
Make it yours

CLI

Manual

Complete the one-time setup first.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-chart.json

Build the definition with TanStack Charts. Show it with Chart, in a ChartFrame.

traffic-chart.tsx

"use client";import { barY, defineChart } from "@tanstack/charts";import { scaleBand } from "@tanstack/charts/scales/band";import { scaleLinear } from "@tanstack/charts/scales/linear";import {  Chart,  ChartCaption,  ChartDescription,  ChartFrame,  ChartLegend,  ChartLegendItem,  ChartTable,  ChartTitle,} from "@/components/vip-ui/chart";const rows = [  { channel: "Direct", visits: 42 },  { channel: "Search", visits: 31 },];const definition = defineChart({  marks: [barY(rows, { x: "channel", y: "visits", key: "channel" })],  scales: {    x: { scale: scaleBand },    y: { scale: scaleLinear, grid: true },  },});<ChartFrame>  <ChartCaption>    <ChartTitle>Traffic sources</ChartTitle>    <ChartDescription>Visits in thousands</ChartDescription>  </ChartCaption>  <Chart definition={definition} height={220} ariaLabel="Visits by channel" />  <ChartLegend>    <ChartLegendItem color="var(--ts-chart-1)">Visits</ChartLegendItem>  </ChartLegend>  <ChartTable    caption="Visits by channel, in thousands"    columns={["Channel", "Visits"]}    rows={rows.map((row) => [row.channel, row.visits])}  /></ChartFrame>

ChartFrame
Sets the series colors and the tooltip styles.
- ChartCaptionOptional
  - ChartTitle
  - ChartValueOptional
  - ChartDescriptionOptional
- ChartActionOptional
  Shows beside the caption. Moves below it on narrow screens.
- Chart
  Owns the motion. Accepts the TanStack core Chart props.
  - ChartCenterOptional
    Covers the plot and centers its content, such as a donut total.
- ChartLegendOptional
  - ChartLegendItemRepeats
- ChartTable
  Screen readers only.

When a chart scrolls into view, it fades in. Its bar, line, area, and arc marks grow from their baseline.
A chart that the server renders on screen does not move when the page loads. A chart that mounts later, for example after a link, grows in.
When the data changes, each mark moves to its new value. Give each mark a stable key.

To change the motion of one chart, give it a renderer.

revenue-chart.tsx

import { motion } from "@tanstack/charts/motion";const gentle = motion({  transition: { type: "spring", stiffness: 120, damping: 20 },});<Chart definition={definition} renderer={gentle} ariaLabel="Weekly revenue" />

To stop the motion, use the static SVG renderer.

revenue-chart.tsx

import { svgChartRenderer } from "@tanstack/charts/svg/renderer";<Chart  definition={definition}  renderer={svgChartRenderer}  ariaLabel="Weekly revenue"/>

Charts use the colors --chart-1 to --chart-6. Set them for light and dark mode.

globals.css

:root {  --chart-1: oklch(0.24 0.012 168);  --chart-2: oklch(0.62 0.11 180);  --chart-3: oklch(0.63 0.13 75);  --chart-4: oklch(0.56 0.14 320);  --chart-5: oklch(0.48 0.13 32);  --chart-6: oklch(0.43 0.12 280);}.dark {  --chart-1: oklch(0.77 0.01 172);  --chart-2: oklch(0.63 0.11 180);  --chart-3: oklch(0.66 0.13 85);  --chart-4: oklch(0.53 0.15 320);  --chart-5: oklch(0.56 0.15 27);  --chart-6: oklch(0.66 0.12 280);}

To change one chart, set a color on its frame.

chart.tsx

<ChartFrame style={{ "--ts-chart-1": "var(--chart-3)" } as CSSProperties}>

ariaLabel names the chart for screen readers.
ChartTable gives screen readers the exact values.
Press Tab to focus a chart that has tooltips. Use the arrow keys to move between points.
Press Enter to pin a tooltip. Press Escape to close it.
When reduced motion is on, charts show at once and do not move.

API reference

TanStack Charts API

All parts also accept className and native HTML attributes.

ChartFrame

--ts-chart-1: color = var(--chart-1): The color of the first series. --ts-chart-2 to --ts-chart-6 set the other series. Set them in style to change the colors of one chart.

ChartAction

children: ReactNode: Controls for the chart, such as a period toggle.

Chart

Also accepts the props of the TanStack core Chart, such as definition, ariaLabel, height, and initialWidth.

renderer: ChartRenderer = chartMotion: Draws and animates the chart. chartMotion is a TanStack motion renderer with a spring.
children: ReactNode: Content on top of the plot, such as ChartCenter.

ChartLegendItem

color: stringRequired: The series color. Use the same value as the mark.
swatch: "square" | "line" | "dashed" = "square": The swatch shape. Use line for a line series and dashed for a dashed line.

ChartTable

caption: stringRequired: Names the table for screen readers.
columns: string[]Required: Column headings. The first column labels each row.
rows: (string | number)[][]Required: The exact values. The table is visible to screen readers only.

Scatter charts

From gallery to app

Installation

Usage

Composition

Motion