Installation

pnpmnpmyarnbun
bunx --bun shadcn@latest add https://ui.ahmet.studio/r/activity-heatmap
Copy

Usage

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

export function Demo() {
  const data = [
    { date: "2025-01-01", value: 4 },
    { date: "2025-01-02", value: 1 },
    { date: "2025-01-03", value: 9 },
  ];

  return (
    <ActivityHeatmap
      data={data}
      formatTooltip={(d) => `${d.value} contributions on ${d.date}`}
      onCellClick={(d) => console.log(d)}
    />
  );
}

Features

• Auto thresholds — quartile-based bucketing across your data; or pass your own thresholds array.
• Themeable scale — provide any colorScale of Tailwind classes.
• Date utilities built in — pass weeks={26} for the last 6 months, or explicit startDate/endDate.
• Localizable — weekStartsOn for Sun/Mon-start weeks.
• Per-cell click & tooltip — wire it up to a popover for full activity drill-down.
• No deps — pure CSS grid + Tailwind.

Props