shadcn-heatmap

Overview

shadcn-heatmap is a set of four heatmap components for React, built to follow shadcn/ui conventions. Each one is a single self-contained .tsx file drawn with SVG and styled with Tailwind v4 tokens, so the source is copied into the project rather than installed as an npm package. It is MIT licensed.

The components cover the common activity-visualization layouts: a GitHub-style yearly calendar, a weekday by hour matrix, a date by hour grid and a status timeline. Runtime dependencies are limited to clsx, tailwind-merge and, for date-based components, date-fns. Tooltips are optional and use the project's own shadcn tooltip.

Features

• CalendarHeatmap: GitHub-style yearly contribution grid with multiple years, ISO Monday start, custom colors and i18n labels.
• WeekdayHeatmap: Weekday by hour-of-day matrix with optional aggregate rows and columns and independent color scales.
• DateHeatmap: Date by hour grid for zoomed windows of 1 to 4 weeks, with a daily sum column.
• StatusHeatmap: Daily status timeline, similar to Atlassian Statuspage, with healthy, degraded, critical and no-data levels.
• Binary mode: Any component can be used with strict 0/1 values for done/missed or pass/fail patterns.
• Theme tokens: Colors come from --color-chart-1, --color-secondary and --color-muted-foreground, and can be overridden with a colors prop.

Tech stack

• React 19+
• Tailwind CSS v4
• SVG
• date-fns, clsx, tailwind-merge

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @heatmap/component-name