Charts that feel alive.

Bar charts

Monthly revenue

Monthly revenue, in dollars
Month	Revenue
October 2025	158300
November 2025	171900
December 2025	176400
January 2026	182400
February 2026	189700
March 2026	201300
April 2026	198600
May 2026	212900
June 2026	219400
July 2026	216800
August 2026	228500
September 2026	236200

Bar

Top pages

Page views for the top pages, last 30 days
Page	Views
/	18420
/pricing	9860
/docs/getting-started	7315
/blog/release-notes-2-0	5120
/docs/components/data-table	4690
/changelog	3240

Horizontal bar

Revenue, year over year

2025
2026

Monthly revenue in 2025 and 2026, in dollars
Month	2025	2026
Jan	141200	182400
Feb	146900	189700
Mar	155800	201300
Apr	152300	198600
May	163100	212900
Jun	168400	219400
Jul	166000	216800
Aug	172900	228500
Sep	178100	236200

Grouped bar

New tickets

Urgent
High
Normal

New support tickets per day, by priority
Date	Urgent	High	Normal
Sep 29	3	14	46
Sep 30	2	12	51
Oct 1	5	16	48
Oct 2	2	11	39
Oct 3	1	3	11
Oct 4	0	2	8
Oct 5	4	15	55
Oct 6	6	18	49
Oct 7	3	13	47
Oct 8	2	12	44
Oct 9	1	10	41
Oct 10	0	4	12
Oct 11	1	2	9
Oct 12	3	14	52

Stacked bar

Net new MRR

Gain
Loss

Net new monthly recurring revenue, in dollars
Month	Net new MRR
October 2025	+$12,400
November 2025	+$8,150
December 2025	-$3,200
January 2026	+$15,900
February 2026	+$9,700
March 2026	+$11,300
April 2026	-$1,850
May 2026	+$7,600
June 2026	+$13,200
July 2026	-$4,750
August 2026	+$10,900
September 2026	+$14,300

Negative bar

Revenue

Monthly revenue
Month	Revenue
October 2025	$158,300
November 2025	$171,900
December 2025	$176,400
January 2026	$182,400
February 2026	$189,700
March 2026	$201,300
April 2026	$198,600
May 2026	$212,900
June 2026	$219,400
July 2026	$216,800
August 2026	$228,500
September 2026	$236,200

Interactive bar

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.

Bar charts

From gallery to app

Installation

Usage

Composition

Motion