Todo / Task Management

Component 42

About

A very minimal, yet functional, animated todo component that will catch user's attention.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Todo / Task Management to your project and fits it to your theme.

Code

How Todo / Task Management is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Todo } from "@/components/ui/todo-task-management"

export default function TodoDemo() {
  const demoTodos = [
    {
      id: "1",
      text: "Do more of what makes you happy",
      completed: false,
    },
    {
      id: "2",
      text: "Focus on progress, not perfection",
      completed: true,
    },
    {
      id: "3",
      text: "Create something meaningful today",
      completed: false,
    },
  ]

  return (
    <div className="min-h-screen w-full flex items-start justify-center pt-20 p-8 bg-background">
      <Todo initialTodos={demoTodos} />
    </div>
  )
}