Todo List

Component 5

About

A live agent plan with completion counts, checkable tasks, and details you can expand.

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

Code

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

Usage.tsx

import * as React from 'react'
import TodoList, { type AgentTodoItem } from '@/components/ui/todo-list'

const steps = [
  { id: '1', label: 'Research registry patterns', detail: 'Read 12 shadcn registries' },
  { id: '2', label: 'Define design tokens', detail: 'Mapped colors, radius and shadows' },
  { id: '3', label: 'Author the component API', detail: 'Typing props for 3 variants' },
  { id: '4', label: 'Verify keyboard interactions', detail: 'Tabbing through every control' },
  { id: '5', label: 'Review responsive layouts', detail: 'Checking 375px to 1440px' },
]

export default function Demo() {
  const [done, setDone] = React.useState(2)
  const [manual, setManual] = React.useState<Record<string, AgentTodoItem['status']> | null>(null)

  React.useEffect(() => {
    if (manual) return
    const timer = setTimeout(
      () => setDone((value) => (value >= steps.length ? 0 : value + 1)),
      done >= steps.length ? 2600 : 1600,
    )
    return () => clearTimeout(timer)
  }, [done, manual])

  const auto = (index: number): AgentTodoItem['status'] =>
    index < done ? 'complete' : index === done ? 'in-progress' : 'pending'

  const items: AgentTodoItem[] = steps.map((step, index) => ({
    ...step,
    status: manual?.[step.id] ?? auto(index),
  }))

  return (
    <TodoList
      className="w-full max-w-lg"
      items={items}
      onItemToggle={(id) =>
        setManual(() => {
          const current = Object.fromEntries(items.map((item) => [item.id, item.status]))
          current[id] = current[id] === 'complete' ? 'pending' : 'complete'
          return current
        })
      }
      title="Build agent components"
    />
  )
}