Shadcn.io is not affiliated with official shadcn/ui
Stats Heatmap With Intensity Legend
A weekly activity heatmap stats card for React and Next.js with a 7-row x N-week cell grid, a 5-level emerald intensity ramp, a prominent Low-to-High legend row below the grid, and a streak summary header built with shadcn/ui and Tailwind CSS
Visualize 12 weeks of daily activity with this heatmap stats card for React and Next.js. Features a 7-row by 12-column cell grid with a 5-level emerald intensity ramp, a pronounced intensity legend below the grid showing the color scale from Low to High, a streak summary row in the header, and monochrome day labels on the left axis. Built with TypeScript, motion/react parent entrance with useReducedMotion, Lucide React FlameIcon for the streak, shadcn/ui tokens, and Tailwind CSS. Perfect for habit trackers, contribution calendars, fitness streak cards, and study-session dashboards.
Related Components
React Stats Block Activity Streak
GitHub-style contribution grid
React Stats Block Calendar Heatmap Month
Monthly calendar heatmap
React Stats Block Hourly Heatmap Grid
Hour-of-day heatmap
React Stats Block Weekly Heatmap Tile Grid
Weekly cell heatmap
React Stats Block Progress Bar List
Linear goal bars
React Stats Block KPI Status Tile Grid
Tile grid with status dots
FAQ
Was this page helpful?
Sign in to leave feedback.
Half Donut Card
A half-circle donut breakdown stats card for React and Next.js with a 180-degree PieChart using startAngle and endAngle, var(--chart-N) segment fills, a centered total label, and legend pills below built with shadcn/ui ChartContainer and Tailwind CSS
Hero Metric Card
A single headline hero metric stats card for React and Next.js with a NumberFlow animated text-4xl value, isAnimated mount guard, min-w-[180px] layout stability, and a trend delta with arrow icon built with shadcn/ui and Tailwind CSS