Chain of Thought

The steps an agent walked through, with search results and images attached to each one.

Understanding the requestThe user wants a dark mode toggle that does not flash on first paint.

Searching the documentationLooking for the theming and dark mode pages

docs/concepts/dark-modedocs/concepts/themingnach-themes

Writing the answer

Checking the snippet compiles

1'use client';
2
3import { ChainOfThought } from '@/components/ui/chain-of-thought';
4
5export function Default() {
6  return (
7    <div className="w-full max-w-md">
8      <ChainOfThought defaultOpen>
9        <ChainOfThought.Header />
10        <ChainOfThought.Content>
11          <ChainOfThought.Step label="Understanding the request" status="complete">
12            <span className="text-muted-foreground text-xs">
13              The user wants a dark mode toggle that does not flash on first paint.
14            </span>
15          </ChainOfThought.Step>
16          <ChainOfThought.Step
17            label="Searching the documentation"
18            description="Looking for the theming and dark mode pages"
19            status="complete"
20          >
21            <ChainOfThought.SearchResults>
22              <ChainOfThought.SearchResult>docs/concepts/dark-mode</ChainOfThought.SearchResult>
23              <ChainOfThought.SearchResult>docs/concepts/theming</ChainOfThought.SearchResult>
24              <ChainOfThought.SearchResult>nach-themes</ChainOfThought.SearchResult>
25            </ChainOfThought.SearchResults>
26          </ChainOfThought.Step>
27          <ChainOfThought.Step label="Writing the answer" status="active" />
28          <ChainOfThought.Step label="Checking the snippet compiles" status="pending" />
29        </ChainOfThought.Content>
30      </ChainOfThought>
31    </div>
32  );
33}

Installation

pnpm dlx nachui add chain-of-thought

Anatomy

1import { ChainOfThought } from '@/components/ui/chain-of-thought';

1<ChainOfThought defaultOpen>
2  <ChainOfThought.Header />
3  <ChainOfThought.Content>
4    <ChainOfThought.Step label="Searching the documentation" status="complete">
5      <ChainOfThought.SearchResults>
6        <ChainOfThought.SearchResult>docs/concepts/theming</ChainOfThought.SearchResult>
7      </ChainOfThought.SearchResults>
8    </ChainOfThought.Step>
9    <ChainOfThought.Step label="Writing the answer" status="active" />
10  </ChainOfThought.Content>
11</ChainOfThought>

Where Reasoning shows one block of thinking, Chain of Thought shows a sequence: steps on a rail, each with its own status and its own evidence.

Composition

Use the following composition to build a ChainOfThought:

ChainOfThought
├── ChainOfThought.Header
└── ChainOfThought.Content
    └── ChainOfThought.Step
        ├── ChainOfThought.SearchResults
        │   └── ChainOfThought.SearchResult
        └── ChainOfThought.Image

Steps

A step takes a label, an optional description and a status of complete, active or pending. The active one pulses, the rail connects them, and the last step drops the connector so the list ends cleanly.

icon swaps the dot for any icon component, which is how you mark a search step differently from a write step.

Evidence

SearchResults holds the sources a step consulted as small chips, and Image frames a screenshot or a chart with an optional caption under it. Both live inside the step they belong to, so the evidence stays attached to the reason for it.

API Reference

ChainOfThought

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

ChainOfThought.Header

Prop	Type	Default	Description
`children`	`ReactNode`	`'Chain of Thought'`	Label of the trigger
`className`	`string`	-	Additional CSS classes

ChainOfThought.Step

Prop	Type	Default	Description
`label`	`ReactNode`	-	Title of the step
`description`	`ReactNode`	-	Supporting line under the title
`status`	`'complete' \| 'active' \| 'pending'`	`'complete'`	Drives the tone and the pulse
`icon`	`ComponentType`	dot	Icon shown in the rail indicator
`className`	`string`	-	Additional CSS classes

ChainOfThought.Image

Prop	Type	Default	Description
`caption`	`ReactNode`	-	Caption under the frame
`className`	`string`	-	Additional CSS classes

ChainOfThought.SearchResults / ChainOfThought.SearchResult

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

PreviousAttachments

NextContext