Heatmap Calendar Component
A reusable React heatmap calendar built with shadcn/ui and Tailwind CSS. Visualize daily activity, fitness data, business metrics, IoT events, or learning progress with a GitHub-style heatmap.
Live Demo
Multiple usage patterns with live preview and copyable code.
Calendar heatmap with built-in axis labels (months + weekdays).
Customize month format and which weekday rows are labeled.
Move the intensity legend below the heatmap.
Smaller cells and tighter spacing (axis labels disabled).
Pick a theme and copy CSS variables (like shadcn themes).
Shorter time window.
Daily training minutes.
Orders per day.
Support tickets opened per day.
Study minutes per day.
Install & Use
Copy the component and install a few lightweight dependencies.
Required helper packages (commonly already present in shadcn projects).