Charts for shadcn/ui dashboards, beyond area, bar, line, and pie

shadcn/ui's Chart component is a thin wrapper around Recharts: a container that wires your theme colors into CSS variables, plus themed tooltip and legend pieces. It ships with examples for area, bar, line, pie, radar, and radial charts, and you copy the one you want.

That is the right foundation, and it is deliberately not a chart library. Once you build a real dashboard you keep writing the same things on top of it: a chart that switches between week, month, and year; a donut with a number in the middle; a funnel with drop-off between steps; a ranked list of top pages; a contribution-style heatmap. This post walks through those, with live examples. All of them sit on shadcn's chart wrapper, so they pick up your theme and match the examples you already have.

Trend chart#

The workhorse. Area, line, or bar over time, any number of series, stacked or grouped, with the tooltip and legend from shadcn. Set type, pass series, and it handles the rest, including a horizontal layout and dot-grid fills for a softer look.

import { TrendChart } from "@/components/ui/trend-chart"

const data = [

npx shadcn@latest add https://dashboardcn.com/r/trend-chart.json

Composed chart#

When one series is revenue and another is a count, they need different axes. The composed chart mixes areas, lines, and bars, supports a second y-axis, reference lines, peak markers, and hatched bars for forecast or projected values.

"use client"

import { ComposedChart } from "@/components/ui/composed-chart"

Donut with a center label#

The shadcn pie example puts a label in the middle with a custom Recharts label component. This version makes that a prop, adds a legend, and can render as a half donut for a gauge.

import { DonutChart } from "@/components/ui/donut-chart"

const browsers = [

Funnel#

There is no funnel in Recharts worth using for a conversion funnel. This one is plain divs: each step as a bar, the drop-off between steps, and overall conversion at the end. It is also the easiest one to restyle, because there is no SVG involved.

import { FunnelChart } from "@/components/ui/funnel-chart"

const steps = [

Bar list#

Top pages, referrers, countries, campaigns. A ranked list with a proportional bar behind each row, the pattern Plausible and Vercel Analytics use. Also plain HTML, so rows can be links.

import { BarList } from "@/components/ui/bar-list"

const pages = [

Activity heatmap#

A calendar heatmap of daily activity, like GitHub's contribution graph. Pass dated values and it lays out the year in weeks, with a tooltip per day and intensity steps drawn from your theme color.

import { ActivityHeatmap } from "@/components/ui/activity-heatmap"

// Deterministic sample data so the demo is stable between renders.

Putting them in cards#

On a dashboard, a chart rarely stands alone. It has a title, a headline number, a period switcher, and sometimes tabs for switching the metric. The blocks are those cards, already composed: a balance chart with a reference line and peak marker, a period bar chart where clicking a bar selects its period, and a metric tabs chart that compares the selected metric against the previous period.

import { BalanceChartCard } from "@/registry/dashboardcn/blocks/balance-chart-card"

const data = Array.from({ length: 24 }, (_, hour) => ({

Every chart and block here is MIT and installs with the shadcn CLI. Browse the full list on the components page.