Task List

A streaming log of what an agent actually did. Tasks reveal one unit at a time with soft height, blur, and a shimmering running title.

Task List

Tasks reveal one unit at a time with soft height, blur, and a shimmering running title. File chips sit inline after the step label.

Loading…

Installation

CLI

npx @sonojs/ui@latest add task-list

Also needs

npm i lucide-react motion

Usage

task-list.tsx

import { SearchIcon } from "lucide-react"
import { TaskList } from "@/components/sonojs/task-list"

const tasks = [
  {
    title: "Found project files",
    runningTitle: "Searching project files",
    icon: SearchIcon,
    steps: [
      { label: 'Searching "app/page.tsx, components structure"' },
      { label: "Read", chips: [{ label: "page.tsx" }] },
      { label: "Scanning 52 files" },
      { label: "Reading files", chips: [{ label: "layout.tsx" }] },
    ],
  },
]

export function Example() {
  return <TaskList tasks={tasks} />
}

Props

Prop	Type	Default	Description
tasks	TaskListTask[]	-	Tasks with title, optional runningTitle/icon, and steps (label + chips).
revealed	number	-	Controlled unit count. Each task is 1 header + one unit per step.
startDelay	number	320	Ms before the first unit appears (uncontrolled).
stepInterval	number	850	Ms between automatic units (uncontrolled).
collapseOnComplete	boolean · "all"	-	Collapse steps per task when done, or wait for the whole run (`"all"`). Off by default.
collapseDelay	number	480	Ms to hold completed steps before folding.
onComplete	() => void	-	Fires once when every unit has been revealed.
className	string	-	Optional class names on the root section.