@heatmap

Beautiful, accessible heatmap components for React: GitHub-style calendar, weekday x hour matrix, date x hour, and status timeline. Built with shadcn/ui conventions.

4 components react shadcn-cli

website ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://shadcn-heatmap.pages.dev/registry.json

pnpm pnpm dlx shadcn@latest add https://shadcn-heatmap.pages.dev/registry.json

bun bunx shadcn@latest add https://shadcn-heatmap.pages.dev/registry.json

fetch registry curl -s https://shadcn-heatmap.pages.dev/registry.json

Components

4 total

CalendarHeatmap component

GitHub-style yearly contribution heatmap with multi-year, weekStart, and i18n support.

npx shadcn@latest add https://shadcn-heatmap.pages.dev/r/calendar-heatmap.json

WeekdayHeatmap component

Weekday × hour-of-day matrix with Sum row/column and independent colour scales.

npx shadcn@latest add https://shadcn-heatmap.pages.dev/r/weekday-heatmap.json

DateHeatmap component

Date × hour matrix for zooming into a narrow time window with daily Sum column.

npx shadcn@latest add https://shadcn-heatmap.pages.dev/r/date-heatmap.json

StatusHeatmap component

Timeline status indicator showing daily activity over a period (e.g. 90 days). Similar to Atlassian Statuspage.

npx shadcn@latest add https://shadcn-heatmap.pages.dev/r/status-heatmap.json