Components
- Activity Heatmap
- Activity Rings
- Bar Chart
- Bar List
- Command Palette
- Composed Chart
- Corner Frame
- Data Table
- Delta Badge
- Distribution Bar
- Donut Chart
- Dot Plot
- Funnel Chart
- Heatmap Chart
- KPI Card
- Metric List
- Metric Value
- Period Tabs
- Radar Chart
- Radial Gauge
- Sankey Chart
- Scatter Chart
- Segmented Meter
- Sparkline
- Tick Bar
- Timeline
- Trend Chart
Blocks
- Activity Rings Card
- Allocation Card
- Balance Chart Card
- Breakdown Card
- Commerce KPI Row
- Contributions Card
- Data Table Card
- Distribution Card
- Dot Plot Card
- Dual Metric Card
- Funnel Chart Card
- Goal Chart Card
- Heatmap Chart Card
- Insight Card
- KPI Row Card
- Metric Tabs Chart Card
- Payment Summary Card
- Period Bar Chart Card
- Progress Card
- Revenue Ring Card
- Ring KPI Card
- Score Gauge Card
- Stage Bars Card
- Status Gauge Card
- Tick KPI Card
A matrix heatmap with a row per line and a column per label, e.g. weekday by hour, with hover highlighting and tooltips.
Mon
Tue
Wed
Thu
Fri
Sat
Sun
00
02
04
06
08
10
12
14
16
18
20
22
LessMore
import { HeatmapChart } from "@/components/ui/heatmap-chart"
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]Installation#
pnpm dlx shadcn@latest add @dashboardcn/heatmap-chartAlso installs tooltip from shadcn/ui if missing.
Usage#
import { HeatmapChart } from "@/components/ui/heatmap-chart"
<HeatmapChart
rows={[
{ label: "Mon", values: [12, 48, 210, 320, 260, 80] },
{ label: "Tue", values: [10, 52, 230, 340, 250, 70] },
]}
columns={["00", "04", "08", "12", "16", "20"]}
unit="sessions"
/>Examples#
Regions by month#
Any two axes work. Set color for the accent and scale to "sqrt" to spread out small values.
North America
Europe
Asia Pacific
Latin America
Middle East
Africa
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
LessMore
"use client"
import { HeatmapChart } from "@/components/ui/heatmap-chart"Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.