Todo List · paneui

Find free weekends in November, In progress
Compare flights TPE → KIX, Pending
Check ryokan availability near Gion, Pending
Draft a two-day itinerary, Pending

Installation

pnpm dlx shadcn@latest add @paneui/todo-list

Usage

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

<TodoList
  title="Plan"
  items={[
    { id: "1", title: "Find flights", status: "done" },
    { id: "2", title: "Book hotel", status: "in-progress" },
  ]}
/>

Examples

Statuses

Collapsed

Collapse on Complete

Use when a finished plan should get out of the way of the reply.

Max Height

Use for long plans inside a fixed-height panel.

Status Mark

Use the mark alone in your own step lists.

Accessibility

The in-progress item has aria-current="step", every title ends with a screen-reader-only status, and the header reads "N of M done".

Motion

Under reduced motion the in-progress arc pulses instead of spinning, checks and crosses appear without drawing, and rows don't animate their position.

API Reference

Built on the Collapsible primitive. Only the props this library adds or changes are listed; everything else passes through.

TodoList

Collapsible agent task plan with a live completion count; failures are counted in the header. Also accepts every prop of Collapsible.Root.

items*: TodoItem[]; Plan items in order.
title= "Plan": ReactNode; Header label.
open: boolean; Controlled open state.
defaultOpen= true: boolean; Initial open state when uncontrolled.
onOpenChange: (open: boolean) => void; Called when the plan opens or closes.
collapseOnComplete= false: boolean; Fold the plan away 700ms after every item is done.
maxHeight: number; Cap the list height in px; it scrolls past this.

Prop	Type	Default	Description
items*	TodoItem[]	—	Plan items in order.
title	ReactNode	"Plan"	Header label.
open	boolean	—	Controlled open state.
defaultOpen	boolean	true	Initial open state when uncontrolled.
onOpenChange	(open: boolean) => void	—	Called when the plan opens or closes.
collapseOnComplete	boolean	false	Fold the plan away 700ms after every item is done.
maxHeight	number	—	Cap the list height in px; it scrolls past this.

data-complete: On the root once every item is done.
data-status: On each item: its status.

Data attribute	Description
data-complete	On the root once every item is done.
data-status	On each item: its status.

TodoItem

Shape of one plan item.

id*: string; Stable key.
title*: ReactNode; What the step does.
status= "pending": "pending" | "in-progress" | "done" | "failed"; Step state.
meta: ReactNode; Trailing note, such as a duration, count or failure reason.
detail: ReactNode; Second line under the title.

Prop	Type	Default	Description
id*	string	—	Stable key.
title*	ReactNode	—	What the step does.
status	"pending" \| "in-progress" \| "done" \| "failed"	"pending"	Step state.
meta	ReactNode	—	Trailing note, such as a duration, count or failure reason.
detail	ReactNode	—	Second line under the title.

TodoStatusMark

The morphing 20px status glyph.

status*: "pending" | "in-progress" | "done" | "failed"; State to draw.
className: string; Merged onto the SVG.

Prop	Type	Default	Description
status*	"pending" \| "in-progress" \| "done" \| "failed"	—	State to draw.
className	string	—	Merged onto the SVG.