ReasoningBlock

A collapsible block that surfaces an AI model's chain-of-thought reasoning, collapsed by default to keep responses clean.

Let me think through this step by step. 1. First, I need to understand the problem... 2. Then I'll consider possible approaches... 3. The best solution seems to be...

import { ReasoningBlock } from "@aetherstack/ui"

Installation

terminal

npx aether-ui add reasoning-block

Import

import.tsx

import { ReasoningBlock } from "@aetherstack/ui"

Usage

reasoningblock.tsx

<ReasoningBlock
  content={response.thinking}
  defaultOpen={false}
/>

Props

Prop	Type	Default	Description
content*	string	—	Reasoning text content — shown as preformatted text inside the block.
defaultOpen	boolean	false	Whether the block starts expanded.
className	string	—	Additional CSS classes.

* Required

Accessibility

→Uses a disclosure widget — the toggle button has aria-expanded reflecting open/closed state.
→Hidden content is removed from the accessibility tree when collapsed.