Reasoning

Reasoning tucks the model's thinking into a collapsible block: “Reasoning…” with a timer while it runs, “Reasoned for 12s” when done.

Built on Collapsible (aria-expanded; the height animation turns off with reduced motion). autoOpen opens the block when reasoning starts and collapses it when done, unless the user has toggled it. The time is measured in an effect (Date.now() is never read during render), so it is safe for SSR; you can also pass duration. String content is rendered with a small StreamingMarkdown and has aria-busy while running.

Yugen Labs · experimentalThis component is outside SemVer: its API can change in a minor release, and What's new says so. Versioning policy

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { Reasoning } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Compared 3 ways to store tokens: CSS variables, JSON, TS. Picked CSS variables because switching themes needs no rebuild.

Finished, with duration

Collapsed by default; pass duration when the server has already measured it.

Usage

Place Reasoning right above the answer and collapse it once done.
Show the reasoning time so people understand why they had to wait.
Let people reopen it to check the reasoning.

Don't

Don't leave a long reasoning block open once the answer is there.
Don't use Reasoning for tool-call steps. Use Trace.
Don't read the reasoning content through a live region.

Props

Prop · Type	Default	Description
streamingboolean	Default: false	Reasoning in progress: changing label, timer, aria-busy.
durationnumber (ms)	Default: —	Duration; measured automatically when left out.
open / defaultOpen / onOpenChangeboolean	Default: —	Controls the open state.
autoOpenboolean	Default: true	Opens when reasoning starts and collapses when it ends.
labelReactNode	Default: —	Replaces the default label.
childrenstring \| ReactNode	Default: —	A string is rendered with StreamingMarkdown size small.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.reasoning

Key · Type	Default (English)	messagesVi
thinkingstring	Default (English)`"Thinking…"`	messagesVi`"Đang suy luận…"`
thoughtstring Đã xong, không rõ thời lượng.	Default (English)`"Thought"`	messagesVi`"Đã suy luận"`
thoughtFor(duration: string) => string Đã xong; `duration` đã định dạng sẵn (vd. "12s").	Default (English)(duration) => `Thought for ${duration}`	messagesVi(duration) => `Đã suy luận trong ${duration}`