Todo List

The Update Todos tool call with done, active and pending items.

import { ClaudeCodeTerminal } from "../components/claude-code-terminal";
import { ClaudeCodeTodoList } from "../components/claude-code-todo-list";
import { CLAUDE_CODE_SESSION } from "../constants/claude-code-session";

export default function ClaudeCodeTodoListExample() {
  return (
    <ClaudeCodeTerminal title="claude — todos">
      <ClaudeCodeTodoList todos={CLAUDE_CODE_SESSION.pending.todos} />
    </ClaudeCodeTerminal>
  );
}

$ bunx --bun shadcn@latest add @notra/claude-code-todo-list

ClaudeCodeTodoList prints the ● Update Todos call with the list hanging off a ⎿ below it. Done todos get a ☒ and a dim strikethrough, the active one is bold white and pending ones stay in the body color. Screen readers hear the status before each label. Change the heading with heading, or pass heading={null} to print the list on its own.

interface ClaudeCodeTodo {
  label: string;
  status: "done" | "active" | "todo";
}

Used in