Reasoning

A collapsible AI reasoning trace, on real <details>/<summary>. Auto-opens while streaming is true and auto-collapses the moment it flips back to false — after that, the user's own manual open/close is left alone, same as a plain <details>.

Thinking

Checking the request against the available components, then narrowing down to the ones that already support a streaming/thinking state.

Examples

Default

Collapsed, with a duration label once reasoning has finished.

Thought for 3s

Checked the existing API before adding a new prop.

Usage

<Reasoning durationLabel="Thought for 3s">
  Checked the existing API before adding a new prop.
</Reasoning>

Streaming

Auto-opens and shows a ThinkingIndicator in place of the static label.

Thinking

Still thinking…

Usage

<Reasoning streaming>
  Still thinking…
</Reasoning>

Already open

defaultOpen for a trace you want visible immediately.

Thought for 6s

Compared two approaches before picking the simpler one.

Usage

<Reasoning defaultOpen durationLabel="Thought for 6s">
  Compared two approaches before picking the simpler one.
</Reasoning>

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Thought for 4s

Weighing a few different approaches before picking the simplest one that actually fits the existing conventions.

streaming

durationLabel

defaultOpen

Usage

<Reasoning durationLabel="Thought for 4s">
  …
</Reasoning>

<kernel-reasoning duration-label="Thought for 4s">
  …
</kernel-reasoning>

Props

Props for Reasoning.
Prop	Type	Default
`streaming`	boolean	false
`durationLabel`	ReactNode	"Reasoning"
`defaultOpen`	boolean	false
`children`	ReactNode (required)	—

Accessibility

Expand/collapse, keyboard support, find-in-page, and printability all come from the browser's own <details>.
The height transition is progressive enhancement (::details-content) — browsers without it still open and close correctly, just instantly.
The streaming state uses ThinkingIndicator's own role="status" live region, so assistive tech is told reasoning is in progress without an extra announcement each render.