Reasoning
A collapsible component for showing AI reasoning, explanations, or logic. You can control it manually or let it auto-close when the stream ends. Markdown is supported.
Installation
Copy and paste the following code into your project.
Examples
Basic Usage
The most basic implementation of the Reasoning component with auto-close functionality when streaming ends.
With Markdown
Show rich formatting with markdown support for better structured reasoning content.
Component API
Reasoning
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | The content of the component |
className | string | - | Additional CSS classes |
open | boolean | - | Control the open state (makes component controlled) |
onOpenChange | (open: boolean) => void | - | Callback when open state changes |
isStreaming | boolean | - | When false, automatically closes the reasoning (auto-close) |
ReasoningTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | The content of the trigger |
className | string | - | Additional CSS classes |
...props | HTMLAttributes<HTMLButtonElement> | - | Additional HTML button props |
ReasoningContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | The content to be displayed |
className | string | - | Additional CSS classes |
contentClassName | string | - | Additional CSS classes for the content |
markdown | boolean | false | Enable markdown rendering for the content |
...props | HTMLAttributes<HTMLDivElement> | - | Additional HTML div props |