Reasoning

Collapsible panel for a model’s reasoning — opens and shimmers "Thinking…" while it streams, then settles to "Thought for N seconds"

Category: display · WCAG 2.2-AA · ai, reasoning, thinking, chain-of-thought, disclosure, collapsible

States

Prop	Type	Default	Description
`children`	`ReactNode`	—	The reasoning text or steps.
`streaming`	`boolean`	`false`	True while reasoning is still arriving: the panel opens, the trigger shimmers "Thinking…" and the content is aria-busy. Turning it off closes the panel.
`duration`	`number`	—	Seconds spent reasoning. Once streaming ends the trigger reads "Thought for {duration} seconds"; without it, "Reasoning". The caller owns the clock.
`label`	`ReactNode`	—	Replaces the trigger text in every state.
`labels`	`{ thinking?: string; thoughtFor?: string; label?: string }`	—	Overrides for the component’s user-visible strings (i18n). `thoughtFor` may contain `{count}`.

Showing a model’s reasoning or thinking trace above its answer, collapsed once the answer arrives
Giving readers an opt-in look at how an AI reached a result without cluttering the reply

General show/hide content — use Collapsible or Accordion
A sequence of discrete agent steps with their own status — use Steps or Timeline
Reporting the phase of a request — use AiStatus

<Reasoning streaming>The user wants a summary, so I will start with the totals…</Reasoning>

<Reasoning duration={12}>The user wants a summary, so I started with the totals and then compared regions.</Reasoning>