Shadcn.io is not affiliated with official shadcn/ui
Todo List Habit Tracker
A weekly habit tracking grid todo list block for React and Next.js with day columns, streak counts, and completion rates built with shadcn/ui and Tailwind CSS
Track daily habits with this weekly grid todo list block for React and Next.js. Features a matrix layout with habits as rows and weekdays as columns, checkbox cells for daily completion, per-habit streak counters, and daily completion rate percentages at the bottom. Built with TypeScript, shadcn/ui Checkbox and Badge components, framer-motion staggered entrance animations, and Tailwind CSS. Perfect for habit-building apps, wellness trackers, and personal development dashboards.
Related Components
Eisenhower Matrix Todo List
Four-quadrant priority matrix
Goal Progress Todo List
Goal tracking with milestones
Streak Counter Todo List
Streak-based task tracking
Weekly Review Todo List
Weekly review format
Daily Planner Todo List
Day planner with sections
Focus Mode Todo List
Single-task focus mode
FAQ
Was this page helpful?
Sign in to leave feedback.
Gtd Inbox
A Getting Things Done inbox processing todo list block for React and Next.js with task classification, category counts, and animated card transitions built with shadcn/ui and Tailwind CSS
Hiring Pipeline
A hiring pipeline todo list block for React and Next.js with candidate stages, interview scores, role filters, and stage progression built with shadcn/ui and Tailwind CSS