Shadcn.io is not affiliated with official shadcn/ui
Stats Calendar Heatmap Month
A month-view calendar heatmap stats card for React and Next.js with a 6x7 grid of day cells, 5-level emerald intensity ramp, inline date numerals, and an intensity legend built with shadcn/ui and Tailwind CSS
Surface daily activity patterns across a calendar month with this calendar heatmap stats card for React and Next.js. Features a 6-row by 7-column grid of aspect-square day cells, a 5-level muted-to-emerald intensity ramp for light and dark modes, inline text-[10px] date numerals inside every cell, day-of-week headers above the grid, and an intensity legend below. Built with TypeScript, cn utility from shadcn/ui, lucide-react icons, motion/react parent entrance with useReducedMotion, and Tailwind CSS utility classes. Perfect for habit trackers, support ticket volume dashboards, publishing cadence reviews, and any product that wants a GitHub-style month-at-a-glance view.
Related Components
React Stats Block Activity Streak
52-week streak heatmap grid
React Stats Block Heatmap With Intensity Legend
Heatmap with intensity legend
React Stats Block Hourly Heatmap Grid
24x7 hour-of-day heatmap
React Stats Block Weekly Heatmap Tile Grid
Weekly heatmap tile grid
React Stats Block Goal Ring Tiles
Goal ring tile grid
React Stats Block Progress Threshold Colored
Progress bars colored by threshold
FAQ
Was this page helpful?
Sign in to leave feedback.
Burndown Chart Card
A sprint burndown chart stats card for React and Next.js with Recharts LineChart showing ideal diagonal and actual progress lines, shaded gap area between ideal and actual, NumberFlow animated remaining points, and a sprint days X-axis built with shadcn/ui and Tailwind CSS
Cohort Retention Card
A cohort retention table stats card for React and Next.js with a triangular heat-colored grid showing retention percentages by cohort month and period, intensity-mapped cell backgrounds, row and column headers, and tabular-nums values built with shadcn/ui and Tailwind CSS