Plan Checklist

Component

About

A live checklist that shows an AI agent's stated plan — pending, in-progress, and done steps — with inline renaming and reordering of steps that haven't started yet.

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

Code

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

Usage.tsx

"use client";

import { useEffect, useState } from "react";
import {
  PlanChecklist,
  type PlanChecklistItem,
} from "@/components/ui/plan-checklist";

const initialItems: PlanChecklistItem[] = [
  { id: "1", label: "Read repository structure", status: "done" },
  { id: "2", label: "Draft migration plan", status: "done" },
  {
    id: "3",
    label: "Apply schema changes",
    status: "in-progress",
    detail: "3 files",
  },
  { id: "4", label: "Run test suite", status: "pending" },
  { id: "5", label: "Open pull request", status: "pending" },
];

export default function Demo() {
  const [items, setItems] = useState<PlanChecklistItem[]>(initialItems);

  useEffect(() => {
    const timer = setTimeout(() => {
      setItems((current) =>
        current.map((item) =>
          item.id === "3"
            ? { ...item, status: "done" }
            : item.id === "4"
              ? { ...item, status: "in-progress" }
              : item,
        ),
      );
    }, 2200);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="flex min-h-screen w-full items-center justify-center p-6">
      <PlanChecklist
        items={items}
        onReorder={(orderedIds) => {
          setItems((current) =>
            orderedIds.map((id) => current.find((item) => item.id === id)!),
          );
        }}
      />
    </div>
  );
}