Agent Todo List

Component 37

About

A collapsible task checklist for AI agent UIs that animates status marks (pending, in progress, completed, cancelled) and shows a live completion count.

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

Code

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

Usage.tsx

import TodoList from "@/components/ui/todo-list";

export default function TodoListDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <div className="w-full max-w-md">
        <TodoList
          title="Sprint tasks"
          items={[
            {
              id: "1",
              title: "Set up project scaffolding",
              status: "completed",
            },
            {
              id: "2",
              title: "Build authentication flow",
              status: "in-progress",
              progress: 60,
            },
            {
              id: "3",
              title: "Write API documentation",
              status: "pending",
            },
            {
              id: "4",
              title: "Deprecate legacy endpoint",
              status: "cancelled",
            },
          ]}
        />
      </div>
    </div>
  );
}