A live agent plan with completion counts, checkable tasks, and details you can expand.
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"
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.