Todo List Streak Counter
A streak-based task tracking todo list block for React and Next.js with flame indicators, sparkline dots, best streak records, and active streak summary built with shadcn/ui and Tailwind CSS
Build lasting habits with this streak-based todo list block for React and Next.js. Features tasks with current streak counts and flame icons, best streak records per task, a 7-day sparkline visualization showing recent completion history as filled and unfilled dots, and a header summarizing total active streaks. Built with TypeScript, shadcn/ui Checkbox and Badge components, framer-motion staggered entrance animations, and Tailwind CSS. Perfect for habit tracking apps, gamified productivity tools, and daily consistency dashboards.
Related Components
Habit Tracker Todo List
Weekly habit tracking grid
Goal Progress Todo List
Goal tracking with milestones
Daily Planner Todo List
Day planner with sections
Focus Mode Todo List
Single-task focus mode
GTD Inbox Todo List
GTD inbox processing workflow
Weekly Review Todo List
Weekly review format
FAQ
Was this page helpful?
Sign in to leave feedback.
Standup
A daily standup format todo list block for React and Next.js with yesterday, today, and blockers sections, add inputs, and read-only summary toggle built with shadcn/ui and Tailwind CSS
Subtasks
A todo list block for React and Next.js with expandable nested subtasks, progress indicators, and parent-child completion tracking built with shadcn/ui and Tailwind CSS