Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Stats Block Activity Streak
Activity streak stats with heatmap grid, streak counters, and consistency metrics for React habit tracking apps
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Track consistency in your Next.js app with this stats component. Features weekly activity heatmap grid, current and longest streak counters, total activity count, and day labels. Built with shadcn/ui Card component using Tailwind CSS. The streak-focused design motivates consistency—perfect for habit trackers, learning platforms, fitness apps, or any React app with daily engagement goals. Motivational and visual.
Installation
Related blocks you will also like
React Stats Block Live
Live metrics
React Stats Block Targets
With target tracking
React Stats Block Progress
Linear progress bars
React Stats Block Goals
With goal progress
React Stats Block Period
Period comparison
React Stats Block Sparkline
Price with charts