Task

A collapsible step with a status, for showing what an agent did and which files it touched.

Read 58 components across two families

Matched the request tobutton.tsxandfield.tsx

Wrote the demo and regenerated the registry

1'use client';
2
3import { Task } from '@/components/ui/task';
4
5export function Default() {
6  return (
7    <div className="w-full max-w-md">
8      <Task defaultOpen>
9        <Task.Trigger title="Scanned the component registry" status="complete" />
10        <Task.Content>
11          <Task.Item>Read 58 components across two families</Task.Item>
12          <Task.Item>
13            Matched the request to
14            <Task.File>button.tsx</Task.File>
15            and
16            <Task.File>field.tsx</Task.File>
17          </Task.Item>
18          <Task.Item>Wrote the demo and regenerated the registry</Task.Item>
19        </Task.Content>
20      </Task>
21    </div>
22  );
23}

Installation

pnpm dlx nachui add task

Anatomy

1import { Task } from '@/components/ui/task';

1<Task defaultOpen>
2  <Task.Trigger title="Scanned the component registry" status="complete" />
3  <Task.Content>
4    <Task.Item>Read 58 components across two families</Task.Item>
5    <Task.Item>
6      Matched the request to <Task.File>button.tsx</Task.File>
7    </Task.Item>
8  </Task.Content>
9</Task>

A task opens by default, because the interesting part of an agent run is usually the step it is on. Set defaultOpen={false} on the ones that already finished.

Composition

Use the following composition to build a Task:

Task
├── Task.Trigger
└── Task.Content
    └── Task.Item
        └── Task.File

Statuses

status drives the icon and its colour: pending waits, active spins, complete checks off and error flags. Stack several tasks to make a run readable at a glance.

Writingprompt-input.tsx

2 errors in the generated registry

1'use client';
2
3import { Task } from '@/components/ui/task';
4
5export function Statuses() {
6  return (
7    <div className="flex w-full max-w-md flex-col gap-4">
8      <Task defaultOpen={false}>
9        <Task.Trigger title="Read the docs" status="complete" />
10        <Task.Content>
11          <Task.Item>Fetched 12 pages from llms.txt</Task.Item>
12        </Task.Content>
13      </Task>
14      <Task defaultOpen>
15        <Task.Trigger title="Generating the component" status="active" />
16        <Task.Content>
17          <Task.Item>
18            Writing
19            <Task.File>prompt-input.tsx</Task.File>
20          </Task.Item>
21        </Task.Content>
22      </Task>
23      <Task defaultOpen={false}>
24        <Task.Trigger title="Run the test suite" status="pending" />
25        <Task.Content>
26          <Task.Item>Waiting for the previous step</Task.Item>
27        </Task.Content>
28      </Task>
29      <Task defaultOpen>
30        <Task.Trigger title="Type check" status="error" />
31        <Task.Content>
32          <Task.Item>2 errors in the generated registry</Task.Item>
33        </Task.Content>
34      </Task>
35    </div>
36  );
37}

API Reference

Task

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`true`	Open state when uncontrolled
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Called when the open state change
`className`	`string`	-	Additional CSS classes

Task.Trigger

Prop	Type	Default	Description
`title`	`string`	-	Label of the step
`status`	`'pending' \| 'active' \| 'complete' \| 'error'`	`'complete'`	Icon and colour of the indicator
`children`	`ReactNode`	-	Replaces the title when given
`className`	`string`	-	Additional CSS classes

Task.Content

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Task.Item

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Task.File

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousSuggestion

NextLogin