Task Progress

Cards

About

A card that visualizes task-completion progress with a percentage bar, an optional goal target, and a breakdown of completed, in-progress, and to-do task counts.

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

Code

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

Usage.tsx

import TaskProgress from "@/components/ui/task-progress";
import type { Task } from "@/components/ui/task-progress-utils/task-list";

const tasks: Task[] = [
  {
    id: "1",
    title: "Design landing page",
    status: "done",
    priority: "high",
    createdAt: new Date(),
    updatedAt: new Date(),
  },
  {
    id: "2",
    title: "Set up CI/CD pipeline",
    status: "done",
    priority: "medium",
    createdAt: new Date(),
    updatedAt: new Date(),
  },
  {
    id: "3",
    title: "Write API documentation",
    status: "in_progress",
    priority: "medium",
    createdAt: new Date(),
    updatedAt: new Date(),
  },
  {
    id: "4",
    title: "Fix login bug",
    status: "in_progress",
    priority: "urgent",
    createdAt: new Date(),
    updatedAt: new Date(),
  },
  {
    id: "5",
    title: "Plan Q3 roadmap",
    status: "todo",
    priority: "low",
    createdAt: new Date(),
    updatedAt: new Date(),
  },
  {
    id: "6",
    title: "Onboard new designer",
    status: "todo",
    priority: "medium",
    createdAt: new Date(),
    updatedAt: new Date(),
  },
  {
    id: "7",
    title: "Deprecated feature cleanup",
    status: "cancelled",
    priority: "low",
    createdAt: new Date(),
    updatedAt: new Date(),
  },
];

export default function TaskProgressDemo() {
  return (
    <div className="w-full max-w-xl p-4">
      <TaskProgress goal={8} tasks={tasks} />
    </div>
  );
}