Task Rows

Expandable task rows that show an AI agent's live progress — status icons, amounts, and nested detail lines.

Separate elevated rows that auto-advance through running and completed states. Replay remounts the timeline.

Loading…

Installation

CLI

npx @sonojs/ui@latest add task-rows

Also needsnpm i lucide-react

task-rows.tsx

import { TaskRows } from "@/components/sonojs/task-rows"

export function Example() {
  return <TaskRows variant="cards" />
}

Prop	Type	Default	Description
variant	"cards" · "list"	"cards"	Cards keeps each row separate; list groups them into one surface.
className	string	—	Optional class names on the root container.