Collapsible to-do list for an AI agent: each step fills a progress ring, rolls its percentage and strikes through when done.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/task-checklist
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { AgentTaskChecklist } from "@/components/nextui/task-checklist";23export function DeployProgress() {4return (5<AgentTaskChecklist6title="Ship the release"7autoPlay={false}8steps={[9{ label: "Run the test suite", status: "done" },10{ label: "Build the bundle", status: "active", percent: 67 },11{ label: "Upload to the CDN" },12{ label: "Purge the cache" },13]}14/>15);16}
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | "Refactor the token layer" | Task name in the header |
| steps | AgentStep[] | 4 sample steps | Rows of the checklist: label, and status and percent when not auto-playing |
| autoPlay | boolean | true | Loop a scripted run while on screen; turn off to drive status yourself |
| open | boolean | – | Controlled expanded state |
| defaultOpen | boolean | true | Starting expanded state when uncontrolled |
| onOpenChange | (open: boolean) => void | – | Called when the header is clicked |
| className | string | – | Extra classes on the wrapper |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.