Shadcn.io is not affiliated with official shadcn/ui
Todo List Drag Sort
A reorderable todo list block for React and Next.js with manual sorting controls, completion tracking, and smooth layout animations built with shadcn/ui and Tailwind CSS
Reorder tasks by priority with this sortable todo list block for React and Next.js. Features manual up and down move controls with smooth framer-motion layout animations, a grip handle indicator, checkbox completion, and an add task input. Built with TypeScript, shadcn/ui Checkbox, Input, and Button components, framer-motion layout animations, and Tailwind CSS. Perfect for priority backlog ordering, sprint planning tools, and personal daily task sequencing.
Related Components
Basic Todo List
Simple checkbox-based todo list
Priority Todo List
Todo list with priority levels
Subtasks Todo List
Todo list with nested subtasks
Tags Todo List
Todo list with tag filtering
Full Task Todo List
Todo list with full task creation
Kanban Todo List
Three-column kanban board
FAQ
Was this page helpful?
Sign in to leave feedback.
Design Review
A design review checklist block for React and Next.js with categorized visual, UX, and technical checks, reviewer notes, and completion tracking built with shadcn/ui and Tailwind CSS
Eisenhower
An Eisenhower urgency-importance matrix todo list block for React and Next.js with four-quadrant task organization, drag-to-reclassify, and batch actions built with shadcn/ui and Tailwind CSS