# ReasoningDisplay

Source: https://lumeo.nativ.sh/components/reasoning-display

# ReasoningDisplay

Collapsible chain-of-thought block for AI reasoning traces.

## When to Use

-   Display reasoning traces from chain-of-thought models (e.g. Claude's extended thinking mode).
-   Show an intermediate thinking step collapsed by default to avoid cluttering the chat UI.
-   Use `IsStreaming` to animate while tokens are arriving, then set it to false when the trace is complete.

Preview Code

Basic

Reasoning

First, I need to consider the user's question carefully. The problem involves finding the optimal path through a weighted graph. I should apply Dijkstra's algorithm here, starting from the source node. Let me trace through the steps: initialize distances to infinity, process nodes by priority queue... After analyzing all edges, the shortest path from A to D is A → B → C → D with total weight 7.

Copy Code

Preview Code

With Duration

Reasoned for 4.2s

First, I need to consider the user's question carefully. The problem involves finding the optimal path through a weighted graph. I should apply Dijkstra's algorithm here, starting from the source node. Let me trace through the steps: initialize distances to infinity, process nodes by priority queue... After analyzing all edges, the shortest path from A to D is A → B → C → D with total weight 7.

Copy Code

Preview Code

Streaming State

Reasoning

Analyzing the request...

Start Streaming Stop

Copy Code

Preview Code

Open by Default

Chain of thought

First, I need to consider the user's question carefully. The problem involves finding the optimal path through a weighted graph. I should apply Dijkstra's algorithm here, starting from the source node. Let me trace through the steps: initialize distances to infinity, process nodes by priority queue... After analyzing all edges, the shortest path from A to D is A → B → C → D with total weight 7.

Copy Code

## API Reference

### ReasoningDisplay

Property

Type

Default

Description

Text

string?

null

The reasoning trace text to display inside the collapsible body.

IsStreaming

bool

false

When true, shows a pulsing dot in the summary and animates the body text.

Summary

string?

null

Custom label for the summary row. Defaults to "Thinking…" while streaming, "Reasoning" otherwise, or "Reasoned for Xs" when `DurationMs` is set.

DurationMs

long?

null

Optional thinking duration in milliseconds. When set, renders "Reasoned for Xs" in the summary.

DefaultOpen

bool

false

If true, the reasoning block is expanded on initial render.

Class

string?

null

Additional CSS classes merged onto the root element.

## Related Components

-   [StreamingText](/components/streaming-text) — Token-by-token streaming text renderer for AI responses.
-   [ToolCallCard](/components/tool-call-card) — AI tool-invocation card showing call and result.
-   [AgentMessageList](/components/agent-message-list) — Chat message stream for AI agents with role-based styling.