Shadcn.io is not affiliated with official shadcn/ui
Todo List Progress Board
A visual progress tracking todo list block for React and Next.js with progress sliders per task, grouped sections by progress range, and overall project progress built with shadcn/ui and Tailwind CSS
Track granular task progress with this visual progress board block for React and Next.js. Features individual progress sliders for each task ranging from 0 to 100 percent, tasks automatically grouped by progress range into Not Started, In Progress, and Complete sections, and an overall project progress bar at the top. Built with TypeScript, shadcn/ui Slider and Button components, framer-motion staggered animations, and Tailwind CSS. Perfect for project tracking dashboards, milestone monitors, and incremental delivery workflows.
Related Components
Analytics Todo List
Task statistics dashboard
Timeline Todo List
Vertical timeline layout
Grouped Todo List
Tasks organized by category
Nested Todo List
Multi-level deep nesting
Table View Todo List
Spreadsheet-style sortable table
Card View Todo List
Grid-based card layout for tasks
FAQ
Was this page helpful?
Sign in to leave feedback.
Priority
A priority-based todo list block for React and Next.js with color-coded priority levels, filter controls, and completion tracking built with shadcn/ui and Tailwind CSS
QA Checklist
A QA testing checklist block for React and Next.js with pass/fail/skip test results, category grouping, severity badges, and pass rate summary built with shadcn/ui and Tailwind CSS