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.
Built-in dropdown to browse full calendar years (Jan–Dec), like GitHub profiles.
Auto-derive intensity buckets from your data instead of GitHub-shaped cutoffs.
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
Add it with the shadcn CLI, or copy the component by hand.
shadcn CLI
Installs the component and its shadcn/ui dependencies (card, tooltip) in one step.