Task List

Cards

About

A status-grouped task card that lists items under "Ready to review", "Running" and "Completed" badges, with an optional owner label per task, for tracking AI agent or workflow progress.

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

Code

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

Usage.tsx

import { TaskList } from "@/components/ui/task-list";

export default function Demo() {
  return (
    <TaskList
      className="w-[300px] max-w-full"
      tasks={[
        { title: "ICP analysis", agent: "Research agent", status: "review" },
        { title: "Q1 analyst report", agent: "Vault agent", status: "running" },
        {
          title: "Q4 drift review",
          agent: "Keeper agent",
          status: "completed",
        },
        {
          title: "Rebalance playbook v2",
          agent: "Research agent",
          status: "completed",
        },
      ]}
    />
  );
}