Browse components

Agent Todo

Collapsible agent task plan with live status marks.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/agent-todo.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/agent-todo.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/agent-todo.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/agent-todo.

Import

import {  AgentTodo,  AgentTodoHeader,  AgentTodoItem,  AgentTodoList,  AgentTodoProgress,  AgentTodoTitle} from "@/components/ui/agent-todo"

example.tsx

import {  AgentTodo,  AgentTodoHeader,  AgentTodoItem,  AgentTodoList,  AgentTodoProgress,  AgentTodoTitle,} from "@/components/ui/agent-todo"export function Example() {  return (    <AgentTodo>      <AgentTodoHeader>        <AgentTodoTitle>Dashboard iteration</AgentTodoTitle>        <AgentTodoProgress completed={1} total={4} />      </AgentTodoHeader>      <AgentTodoList>        <AgentTodoItem status="completed">Audit the current shell</AgentTodoItem>        <AgentTodoItem status="running">Group KPI cards</AgentTodoItem>        <AgentTodoItem status="pending">Add a timeframe selector</AgentTodoItem>      </AgentTodoList>    </AgentTodo>  )}

API Reference

AgentTodoItem

Prop	Type	Default
status	"pending" \| "running" \| "completed" \| "failed"	"pending"

AgentTodoProgress

Prop	Type	Default
completed	number	—
total	number	—