Activity HeatmapProv1.0.0
A year of days, one cell per day, in five steps of ink: months above, weekdays beside, and a grid you can read with the keyboard, where every day says its date and amount.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-activity-heatmapNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Legend and total
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { ActivityHeatmap, type HeatmapDay } from "@/components/ui/lumen/controls/activity-heatmap";
export function DeployHistory({ days }: { days: HeatmapDay[] }) {
return <ActivityHeatmap aria-label="Deploys" data={days} unit={{ one: "deploy", other: "deploys" }} onDayClick={(day) => console.log(day.date)} />;
}Props
data–{ date: "YYYY-MM-DD", value }[]One entry per day with activity; missing days are none.
aria-label–stringNames the grid, e.g. "Deploys".
endDate–stringThe last day shown. Default: the latest day in data.
weeks53numberHow many weeks (columns).
weekStartsOn10 | 1Monday (1) or Sunday (0) at the top.
unit{ one: "event", other: "events" }{ one, other }What a value counts, in the labels.
Show all 9 propsShow fewer
color–stringThe busiest cells' colour. Default: ink.
onDayClick–({ date, value }) => voidA day was clicked or chosen with Enter.
showLegend / showTotal / locale / labels–boolean / boolean / string / Partial<{ less, more, total }>The Less–More key, the total, the date language, and the words.
Source
components/ui/lumen/controls/activity-heatmap.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
