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.
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>
);
}
Part of HextaUI — browse the full library on 21st.dev.