Shadcn.io is not affiliated with official shadcn/ui
Stats Weekly Heatmap Tile Grid
A weekly heatmap tile grid stats card for React and Next.js with 7 day-of-week tiles and 24 hourly intensity cells per row, emerald 5-level intensity ramp, and tabular-nums peak-hour labels built with shadcn/ui and Tailwind CSS
Visualize weekly engagement by day and hour with this weekly heatmap tile grid stats card for React and Next.js. Features seven vertically-stacked day-of-week tiles with a 24-cell hourly intensity strip each, a 5-level emerald-to-muted Tailwind colour ramp, per-day peak hour labels, and an inline legend scale at the bottom. Built with TypeScript, motion/react parent entrance, Lucide React icons, Tailwind CSS grid cells, and native semantic markup with role=img scales. Perfect for support ticket volume dashboards, campaign engagement heatmaps, warehouse activity monitoring, and user session analysis pages.
Related Components
React Stats Block Activity Streak
GitHub-style contribution grid
React Stats Block Hourly Heatmap
Dense 7x24 hour cell grid
React Stats Block Calendar Heatmap
Month calendar heatmap
React Stats Block Heatmap Legend
Heatmap with colour scale
React Stats Block Histogram
Bucketed distribution card
React Stats Block Weekly Breakdown
Weekday category bars
FAQ
Was this page helpful?
Sign in to leave feedback.
Waterfall Chart Card
A waterfall chart stats card for React and Next.js with Recharts BarChart rendering cumulative additions and subtractions as floating colored bars, emerald gains, red losses, foreground totals, NumberFlow net result, and connector logic built with shadcn/ui and Tailwind CSS
Accordion
Expandable award rows revealing description, criteria, and organization details on click