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 { useState } from "react";

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

const initialItems: PlanChecklistItem[] = [
  { id: "1", label: "Collect requirements", status: "done" },
  { id: "2", label: "Sketch the API surface", status: "in-progress" },
  { id: "3", label: "Wire up the demo", status: "pending" },
  { id: "4", label: "Ship it", status: "pending" },
];

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

  function handleRelabel(id: string, label: string) {
    setItems((prev) =>
      prev.map((item) => (item.id === id ? { ...item, label } : item)),
    );
  }

  function handleReorder(orderedIds: string[]) {
    setItems((prev) =>
      orderedIds.map((id) => prev.find((item) => item.id === id)!),
    );
  }

  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">
      <PlanChecklist
        items={items}
        title="Plan"
        onRelabel={handleRelabel}
        onReorder={handleReorder}
      />
    </div>
  );
}