# Reasoning
Source: https://ui.spencerwueste.com/docs/components/reasoning
Markdown: https://ui.spencerwueste.com/llm/components/reasoning.md

> Collapsible thinking block that opens while streaming and reports elapsed time when done.

> Live preview: https://ui.spencerwueste.com/docs/components/reasoning (demo source: `src/demos/reasoning-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/reasoning.json
```

Manual install dependencies: `streamdown @heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/reasoning.json

## Usage

```tsx
import {
  Reasoning,
  ReasoningContent,
  ReasoningTrigger,
} from "@/components/pandacoderz-ui/reasoning";
```

```tsx
<Reasoning isStreaming={isThinking}>
  <ReasoningTrigger />
  <ReasoningContent>{reasoningMarkdown}</ReasoningContent>
</Reasoning>
```

While `isStreaming` is true the block stays open and the label shimmers. When it flips to false the block collapses and the label becomes "Thought for N seconds".

## API Reference

### Reasoning

| Prop | Type | Description |
| --- | --- | --- |
| `isStreaming` | `boolean` | Whether reasoning tokens are still arriving. |
| `open` | `boolean` | Controlled open state. |
| `defaultOpen` | `boolean` | Initial open state when uncontrolled. |
| `onOpenChange` | `(open: boolean) => void` | Open state callback. |

### ReasoningTrigger

Renders the default label unless you pass children.

### ReasoningContent

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `string` | Markdown text. Rendered with Streamdown. |