Chain Of Thought

Usage

ChainOfThought discloses stepwise reasoning as a timeline under a muted trigger row. Compose a step per stage of the work:

The region is open by default. defaultOpen, open and onOpenChange work as on Collapsible; details.cancel() keeps the current state.
A step marks what it does with an icon. Without one it falls back to a status marker, which should be used sparingly: a success check for Complete, an informative pulsing dot for Active, a subtle hourglass for Pending. The shapes differ, so color is never the only cue. An icon marker does not change with status.
A connector joins each marker to the next. The last step draws no connector and no trailing gap.
statusLabel is the spoken status ("Complete"). The marker is decorative, so a step without an icon must pass it (the types require it); an icon step paints no status and may omit it.
Steps are list items of an ordered list; render them inside ChainOfThought.
ChainOfThought composes a flush Collapsible, so the trigger, the chevron and the motion are Collapsible's.

Usage

ChainOfThought discloses stepwise reasoning as a timeline under a muted trigger row. Compose a step per stage of the work:

The region is open by default. defaultOpen, open and onOpenChange work as on Collapsible; details.cancel() keeps the current state.
A step marks what it does with an icon. Without one it falls back to a status marker, which should be used sparingly: a success check for Complete, an informative pulsing dot for Active, a subtle hourglass for Pending. The shapes differ, so color is never the only cue. An icon marker does not change with status.
A connector joins each marker to the next. The last step draws no connector and no trailing gap.
statusLabel is the spoken status ("Complete"). The marker is decorative, so a step without an icon must pass it (the types require it); an icon step paints no status and may omit it.
Steps are list items of an ordered list; render them inside ChainOfThought.
ChainOfThought composes a flush Collapsible, so the trigger, the chevron and the motion are Collapsible's.