Reasoning
Model reasoning behind one quiet line: Thinking with a live timer while it streams, then Thought for 12 s. Collapsed by default, never closed on a timer.
On this page
Thinking with a live timer and summary line, then Thought for 12 s.
Installation
Usage
import { Reasoning, reasoningPropsFromPart } from "@/components/ui/chatcn/reasoning"
<Reasoning text={text} state="streaming" />
// From an AI SDK or chatcn reasoning part
<Reasoning {...reasoningPropsFromPart(part)} />While streaming, the line shows the latest **Heading** from the text, or the first sentence of the latest paragraph. Pass summary to set it yourself, or a markdown renderer as children for the body.
Examples
Variants
Inline for traces, card for standalone use, minimal for prose.
Hidden reasoning
Some providers encrypt reasoning. The block keeps its duration and explains why there is nothing to read, instead of becoming an inert stub.
The provider encrypted the reasoning: duration and a note only.
Props
| Prop | Type | Notes |
|---|---|---|
text | string | Reasoning so far. **Heading** lines become headings |
state | "streaming" | "done" | Default done |
startedAt, durationMs | number | Measured automatically when omitted |
summary | ReactNode | The line next to Thinking. null hides it |
redacted | boolean | Reasoning hidden by the provider |
variant | "inline" | "card" | "minimal" | Inline sits on a trace rail |
children | ReactNode | Custom body, for example markdown |
open, defaultOpen, onOpenChange | Collapsed by default |
Keyboard
| Key | Action |
|---|---|
Enter, Space | Expand or collapse |
Accessibility
- The header is a disclosure button with
aria-expanded. - The timer is not announced every second. When thinking ends, a polite live region says Thought for 12 seconds once.
Motion
- Thinking uses the kit's one text shimmer. Under reduced motion it is static text.
- Opened while streaming, the body eases to its new height in 200 ms per line instead of jumping, then scrolls inside a capped box that stays pinned to the bottom until you scroll up.
- Nothing closes it automatically. If you open it while the model thinks, it stays open.