Skip to content
Neon UI
Esc
↑↓navigate↵open⌘Jpreview
On this page

ChainOfThought

Step-by-step reasoning rail with statuses and search chips.

ChainOfThought lays an agent’s discrete reasoning steps on a connected vertical rail: each step gets a status dot, a label, and an optional description, with the active step shimmering while it runs and pending steps waiting dimmed. Steps can carry search-result chips and captioned images.

Use it when the model emits labeled stages (searches, tool calls, drafts). For one continuous thinking stream, use Reasoning instead.

Inspired by Chain of Thought from Vercel’s AI SDK Elements, rebuilt on Base UI in the registry’s own vocabulary.

  1. Parsing the request
    Book tracker with reading status and ratings
  2. Searching the Neon docs
    neon.com/docs/branchingneon.com/docs/schema-migrations
  3. Drafting the schema
    books, authors, reading_log
  4. Writing the migration

Install

npx shadcn@latest add https://ui.neon.com/r/chain-of-thought.json

Usage

import {
  ChainOfThought,
  ChainOfThoughtContent,
  ChainOfThoughtHeader,
  ChainOfThoughtStep,
} from "@/components/neon-ui/chain-of-thought";

<ChainOfThought defaultOpen>
  <ChainOfThoughtHeader />
  <ChainOfThoughtContent>
    <ChainOfThoughtStep label="Searching the docs" status="complete" />
    <ChainOfThoughtStep label="Drafting the schema" status="active" />
    <ChainOfThoughtStep label="Writing the migration" status="pending" />
  </ChainOfThoughtContent>
</ChainOfThought>;

Wiring to Neon

Map AI SDK tool parts onto steps — output-available and output-error are complete, anything still streaming is active. The typed example renders one step per tool call and opens the fold while the message streams so the reader watches steps land.

Props

<ChainOfThought />

Extends the Base UI Collapsible.Root: open, defaultOpen, and onOpenChange work as usual.

<ChainOfThoughtHeader />

Extends the Base UI Collapsible.Trigger. Children replace the default “Chain of thought” label; the chevron stays.

<ChainOfThoughtStep />

PropType
labelReactNode

The step headline, shimmering while active.

TypeReactNode
description?ReactNode

Dimmed detail line under the label.

TypeReactNode
status?"complete" | "active" | "pending"

Visual status; exposed as data-status.

Type"complete" | "active" | "pending"
Default"complete"
icon?ReactNode

Replaces the default square status dot.

TypeReactNode
children?ReactNode

Extra content under the step, e.g. ChainOfThoughtSearchResults or ChainOfThoughtImage.

TypeReactNode

<ChainOfThoughtSearchResults /> and <ChainOfThoughtSearchResult />

A wrapping row of quiet outline chips. ChainOfThoughtSearchResult extends Badge; pass Base UI’s render prop to make a chip a link.

<ChainOfThoughtImage />

PropType
childrenReactNode

The visual itself, e.g. an img element.

TypeReactNode
caption?string

Dimmed caption under the visual.

Typestring

Accessibility

  • Steps render as an ordered list; the active step carries aria-current="step".
  • Status is exposed as data-status and conveyed by label weight and text, never color alone.
  • The trigger is a real button with aria-expanded; the fold snaps under prefers-reduced-motion.
  • The active dot’s breathing pauses under prefers-reduced-motion.