Components
A calendar heatmap of daily activity, in the style of a contribution graph.
Mon
Wed
Fri
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
LessMore
import { ActivityHeatmap } from "@/components/ui/activity-heatmap"
// Deterministic sample data so the demo is stable between renders.Installation#
pnpm dlx shadcn@latest add https://dashboardcn.com/r/activity-heatmap.jsonAlso installs tooltip from shadcn/ui if missing.
Usage#
import { ActivityHeatmap } from "@/components/ui/activity-heatmap"
<ActivityHeatmap
data={[
{ date: "2026-09-01", value: 12 },
{ date: "2026-09-02", value: 3 },
]}
unit="deploys"
/>Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.