Shadcn.io is not affiliated with official shadcn/ui
Stats Activity Streak
A GitHub-style activity heatmap grid stats card for React and Next.js with a 5-level intensity colour ramp, current and longest streak counters, and a Less/More legend built with shadcn/ui and Tailwind CSS
Visualize daily activity consistency with this heatmap grid stats card for React and Next.js. Features a 7xN week grid with a 5-level emerald intensity ramp, month labels running above the first column of each month, NumberFlow animated current-streak, longest-streak, and active-days counters paired with Flame, Trophy, and CalendarCheck Lucide icons, Mon/Wed/Fri day labels on the left rail, and a Less/More legend row at the bottom. Built with TypeScript, NumberFlow animated values, motion/react parent entrance with useReducedMotion guard, Lucide React icons, shadcn/ui primitives, and Tailwind CSS. Perfect for contribution graphs, habit trackers, learning streaks, fitness consistency dashboards, and any React app measuring daily engagement.
Related Components
React Stats Block Calendar Heatmap
Monthly calendar heatmap
React Stats Block Heatmap Legend
Heatmap with intensity legend
React Stats Block Hourly Heatmap
Hourly activity grid
React Stats Block Weekly Heatmap
Weekly heatmap tile grid
React Stats Block Progress List
Linear goal bars
React Stats Block Goal Ring Tiles
Radial goal tiles
FAQ
Was this page helpful?
Sign in to leave feedback.
Top Bar Workspace
A top bar banner for React and Next.js showing the active workspace avatar, name, role badge, and a switch link inside a compact single-line chrome strip built with shadcn/ui and Tailwind CSS
API Usage
An endpoint-level API usage stats table for React and Next.js with a monospace path column, per-row calls, error rate, p50/p95/p99 latency percentiles, and threshold-aware rate-limit progress bars built with shadcn/ui and Tailwind CSS