Agents
Task
A to-do list the agent works through, with progress.
Task shows a checklist an agent is working through: a progress bar, finished items checked off, and the current one shimmering.
Preview
- Write the shared tax helper
- Switch the API to the helper
- Switch the PDF renderer
- Backfill invoices from this month
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/task.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/task.
Builds on: collapsible, motion, progress, text-shimmer
Usage
import { Task } from "@/components/ui/task";
<Task title="Migrate invoices" items={[{ label: "Write helper", status: "done" }]} />API reference
Task
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Heading. |
| items | { label; status: "done" | "active" | "todo" }[] | — | Items. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: ai task list · agent todo list ui · task progress component · shadcn ai task