Todo list
The agent’s checklist, ticked off as it works, with a count of what’s done.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/todo-list-default.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/todo-list-default.json
Connect an agent plan to live task progress in React →
Usage & API
Example
import { TodoList } from "@/components/ai/todo-list-default"
<TodoList
todos={[]}
/>Props TodoList
| Prop | Type & description | Required |
|---|---|---|
todos | Todo[] | Required |
title | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The header is a dot, the title, and the done count. The dot pulses until every item is done, then turns solid. Each row is a checkbox glyph: filled with a check when done, a small pulse when doing, and an empty box when todo. The text of a doing item shimmers. The text of a done item is struck and dimmed. A screen-reader suffix says done or in progress. There is no click handler, no reorder and no add button. title only replaces the word Todos. An empty todos array shows a pulsing dot and a count of 0 of 0, and it is not treated as finished.
Example
import { TodoProgress } from "@/components/ai/todo-list-progress"
<TodoProgress
items={[]}
/>Props TodoProgress
| Prop | Type & description | Required |
|---|---|---|
items | ProgressTodo[] | Required |
Dependencies
- React
- Tailwind CSS
- lucide-react
Implementation notes
The heading and the fraction sit on one line, then a progressbar whose value is the number of done items and whose maximum is the list length, or 1 when the list is empty. Each item is a segment: done, doing, or still empty. The row under the bar repeats the status with a check, a spinner, or an empty circle, and the doing row adds the words In progress. Done labels are dimmed. Nothing is expandable. Because the heading flips to Plan complete as soon as no item is doing, drive status doing for the active item for the whole time the list should read as unfinished.
Choosing a layout
Use the checklist when the agent published a set of tasks and the reply should show them being completed in order. It is the working form of a plan, not the proposal. A plan has approve and edit, and its steps open into detail and files. A todo row is one line of text and a status. Keep the list in the thread while the run is going, and leave it there afterwards. A finished list, with the count at N of N and every row struck through, is the record of what the agent said it would do.
Use the progress layout when the list is short and the bar will be seen from across a panel. The bar is one segment per item, not a percentage you pass. Prefer a step timeline when you also have start times, durations and nested checks. Prefer research progress when the work is a research job with phases, an elapsed clock and the page being read. A background task tray is for jobs that leave the thread and run behind a status button, not for a checklist embedded in a reply.
Why does the progress layout say the plan is complete when items remain?
The heading looks for an item with status doing. If it finds none, it reads Plan complete, even if other items are still todo. The fraction next to it still counts only done items. Set the active item to doing while work remains, and set it to done or todo when you truly want that heading.
Can the checklist heading say something other than Todos?
Pass title to replace Todos. The count beside it stays N of the todos length, with N the number of status done items. The progress layout has no title prop. Its heading is only the working phrase or the complete phrase.