Shadcn.io is not affiliated with official shadcn/ui
Todo List Basic
A basic todo list block for React and Next.js with checkbox completion, add task input, and completion counter built with shadcn/ui and Tailwind CSS
Build a clean task management interface with this basic todo list block for React and Next.js. Features checkbox-based task completion with strikethrough styling, an inline add task input, and a real-time completion counter. Built with TypeScript, shadcn/ui Checkbox, Input, and Button components, framer-motion entrance animations, and Tailwind CSS. Perfect for productivity dashboards, project management tools, and personal task trackers.
Related Components
Priority Todo List
Todo list with priority levels
Subtasks Todo List
Todo list with nested subtasks
Tags Todo List
Todo list with tag filtering
Search Filter Todo List
Todo list with search and filtering
Recurring Todo List
Todo list with recurring tasks
Calendar Todo List
Todo list with calendar view
FAQ
Was this page helpful?
Sign in to leave feedback.
Automation
A task automation rules block for React and Next.js with trigger-action rules, active toggles, and rule builder display built with shadcn/ui and Tailwind CSS
Batch Edit
A todo list block with inline batch editing mode for React and Next.js featuring edit mode toggle, inline text inputs, change highlighting, per-row undo, and batch save/cancel actions built with shadcn/ui and Tailwind CSS