Chain Of Thought

An ordered list of thinking steps, each independently expandable.

Anatomy

Two layers of collapsibles. The outer one wraps the whole chain and toggles every step at once. The inner one wraps each step and toggles just that step's detail. A thin rail runs down the left, joining the header dot to every step dot, threading through any expanded panel and stopping at the final dot. Place a ChainOfThoughtIcon inside both the header and each step trigger so the row anchors on the rail.

API

Reference for each part of the component, including its available props and behavior.

ChainOfThought

Outer collapsible. Clicking the header toggles the panel, which hides every step at once. Each step keeps its own open state while the panel is hidden.

ChainOfThoughtHeader

The topmost row on the chain. Renders the icon, the label, and a chevron that rotates from right to down when the panel opens. The header sits on the same column as the step icons, so its icon reads as the start of the chain. When the chain is closed the row stands on its own with no trailing connector.

ChainOfThoughtContent

The panel that holds the step list. Animates open and close. The connectors live inside the panel, so when the chain is closed only the header dot remains.

ChainOfThoughtStep

A single step in the chain. Each step opens and closes independently of its siblings and of the outer header. Mark the active step with defaultOpen so the user lands on its detail without having to click.

ChainOfThoughtStepTrigger

Step header. Renders the icon, the label, and a chevron. The trigger sits on the same column as the header icon, so the chain stays aligned across rows.

ChainOfThoughtStepStatic

A non-collapsible step. Renders a single row of icon and label, with the same column alignment and trailing rail connector as a regular step, but no chevron and no panel. Use it for short status notes that do not need a detail body, like an acknowledgement or a brief intermediate state.

ChainOfThoughtIcon

The leading mark on the chain, used inside both the header and each step trigger. Defaults to a small filled circle. Pass any element as children to swap it for a spinner while a step is in progress, a check when it completes, or any custom glyph. The icon container keeps a fixed width so swapping the inner element does not break the rail's column. Size the inner element rather than the container, since the container defines where the rail sits.

ChainOfThoughtStepContent

The expanding detail under a step. Animates height open and close. Indented to sit under the step's label so the chain column on the left stays clean.