Shadcn.io is not affiliated with official shadcn/ui
Todo List Analytics
A task statistics dashboard todo list block for React and Next.js with stat cards, completion rate, week-over-week comparison, and productivity score built with shadcn/ui and Tailwind CSS
Track productivity metrics alongside your tasks with this analytics todo list block for React and Next.js. Features four stat cards for Total, Completed, In Progress, and Overdue counts, a completion rate percentage, week-over-week task comparison, and a productivity score. Built with TypeScript, shadcn/ui Checkbox and Badge components, framer-motion staggered entrance animations, and Tailwind CSS. Ideal for personal productivity dashboards, team performance tracking, and data-driven task management interfaces.
Related Components
Progress Board Todo List
Visual progress tracking with sliders
Table View Todo List
Spreadsheet-style sortable table
Timeline Todo List
Vertical timeline layout
Grouped Todo List
Tasks organized by category
Split View Todo List
List with detail panel
Compact Todo List
Ultra-dense compact task view
FAQ
Was this page helpful?
Sign in to leave feedback.
Accessibility Check
An accessibility compliance checklist block for React and Next.js with WCAG principles, conformance level badges, pass/fail tracking, and compliance percentage built with shadcn/ui and Tailwind CSS
Approval
React todo list approval workflow block for Next.js with draft, pending, approved, and rejected states, reviewer avatars, and action buttons using shadcn/ui and Tailwind CSS