Chart - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/chart

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <Bar dataKey="value" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

Examples

Area Gradient

Area chart with gradient fill.

Bar Multiple

Multiple series bar chart.

Bar Interactive

Interactive bar with tabs.

Pie Donut

Donut chart with center text.

Radial

Radial stacked chart.

API Reference

Prop	Type	Default	Description
`config`*	`ChartConfig`	—	Chart configuration object.

Area Chart - Interactive

Showing total visitors for the selected period

Installation

pnpm dlx shadcn@latest add @saturation-ui/chart

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <Bar dataKey="value" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

Examples

Area Gradient

Revenue vs Expenses

Monthly financial overview with gradient fill

Area chart with gradient fill.

Bar Multiple

Desktop vs Mobile

Visitor count by platform over the last 6 months

Multiple series bar chart.

Bar Interactive

Page Analytics

Daily views and clicks for the last 12 days

Interactive bar with tabs.

Pie Donut

Department Budget

Budget allocation across production departments

Camera

Electric

Grip

Sound

Art

Donut chart with center text.

Radial

Budget Utilization

Percentage of budget spent by department

Radial stacked chart.

API Reference

Prop	Type	Default	Description
`config`*	`ChartConfig`	—	Chart configuration object.