Charts that feel alive.

Distribution charts

Load time distribution

Good
Needs improvement
Poor

Page loads by largest contentful paint
Range	Page loads	Rating
0–0.5 s	0	Good
0.5–1 s	6	Good
1–1.5 s	30	Good
1.5–2 s	36	Good
2–2.5 s	41	Good
2.5–3 s	26	Needs improvement
3–3.5 s	15	Needs improvement
3.5–4 s	12	Needs improvement
4–4.5 s	6	Poor
4.5–5 s	4	Poor
5–5.5 s	1	Poor
5.5–6 s	1	Poor
6–6.5 s	0	Poor
6.5–7 s	1	Poor
7–7.5 s	0	Poor
7.5–8 s	1	Poor

Histogram

Latency by region

Request latency by region, in milliseconds
Region	Lowest	First quartile	Median	Third quartile	Highest
us-east-1	61	69.5	75	81.75	93
eu-west-1	82	95	101	111	124
ap-south-1	118	137	151	168	189

Box plot

Closed deals

Small business
Mid-market
Enterprise

Closed deals in the third quarter
Deal	Segment	Annual contract value
DL-2041	Small business	$4,200
DL-2042	Small business	$5,800
DL-2043	Small business	$6,500
DL-2044	Small business	$7,900
DL-2045	Small business	$8,400
DL-2046	Small business	$9,100
DL-2047	Small business	$9,600
DL-2048	Small business	$10,800
DL-2049	Small business	$11,500
DL-2050	Small business	$12,200
DL-2051	Small business	$12,900
DL-2052	Small business	$13,400
DL-2053	Small business	$14,100
DL-2054	Small business	$14,800
DL-2055	Mid-market	$15,200
DL-2056	Mid-market	$16,400
DL-2057	Mid-market	$17,300
DL-2058	Mid-market	$17,900
DL-2059	Mid-market	$18,600
DL-2060	Mid-market	$19,200
DL-2061	Mid-market	$20,500
DL-2062	Mid-market	$21,800
DL-2063	Mid-market	$22,400
DL-2064	Mid-market	$23,900
DL-2065	Mid-market	$24,600
DL-2066	Mid-market	$26,100
DL-2067	Mid-market	$27,800
DL-2068	Mid-market	$29,400
DL-2069	Mid-market	$31,200
DL-2070	Mid-market	$33,500
DL-2071	Mid-market	$36,800
DL-2072	Mid-market	$38,400
DL-2073	Enterprise	$42,600
DL-2074	Enterprise	$47,900
DL-2075	Enterprise	$55,300
DL-2076	Enterprise	$64,800

Beeswarm

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.

Distribution charts

From gallery to app

Installation

Usage

Composition

Motion