Todo List

A collapsible task list that shows an AI agent's plan and progress — status icons, rolling counts, and disclosure animation.

Live progress

Items advance from pending through in-progress to completed. The header count rolls, and Replay remounts the cycle.

Loading…

Installation

CLI

npx @sonojs/ui@latest add todo-list

Also needsnpx @sonojs/ui@latest add agent-disclosure && npm i lucide-react motion

Usage

todo-list.tsx

import { TodoList } from "@/components/sonojs/todo-list"

export function Example() {
  return (
    <TodoList
      items={[
        { id: "1", title: "Read the brief", status: "completed" },
        { id: "2", title: "Draft the plan", status: "in-progress" },
        { id: "3", title: "Ship the update", status: "pending" },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
items	TodoItem[]	—	Tasks with id, title, and optional status/detail.
title	ReactNode	"To-dos"	Header label next to the list icon.
open / defaultOpen	boolean	true	Controlled or uncontrolled disclosure state.
onOpenChange	(open: boolean) => void	—	Fires when the header expands or collapses.
collapseOnComplete	boolean	true	Auto-collapses when every item is completed.
maxHeight	number	248	Scroll viewport max height in pixels.
className	string	—	Optional class names on the root section.