MyloUI
Back to blocks
todo-list
Block

Todo List - Checklist

An organized checklist with categories, progress bars, and drag-and-drop item reordering

Installation

npx shadcn add @mylo-ui/todo-list-checklist

Preview

Project Checklist

5/10
Overall Progress50%
Final content review
SEO optimization
Performance testing
Set up CI/CD pipeline
Write unit tests
Integration testing
Documentation
Create mockups
Design system
Asset exports

Usage

import { TodoListChecklist } from "@/components/blocks/todo-list-checklist"

export default function Page() {
  return <TodoListChecklist />
}

Dependencies

lucide-react
@dnd-kit/core
@dnd-kit/sortable
@dnd-kit/utilities

shadcn/ui Components

card
button
input
checkbox
badge
progress

Related Blocks

More todo-list blocks you might like

View all todo-list blocks
Todo List - Simple
todo-list

Todo List - Simple

A simple todo list with progress tracking and drag-and-drop reordering

Ready to use
/blocks/todo-list-simple
Todo List - Kanban
todo-list

Todo List - Kanban

A kanban board style todo list with full drag-and-drop support for moving and reordering tasks

Ready to use
/blocks/todo-list-kanban
Todo List - Minimal
todo-list

Todo List - Minimal

A minimal, clean todo list design

Ready to use
/blocks/todo-list-minimal