# Reasoning

> The model’s reasoning: open while it thinks, then one line, "Thought for 3.2s".

Source: https://agent-ui-kit-demo.vercel.app/docs/components/reasoning

## Installation

From npm:

```bash
npm i @dgesteves/agent-ui-kit ai
```

```tsx
import { Reasoning } from '@dgesteves/agent-ui-kit';
import '@dgesteves/agent-ui-kit/styles.css'; // once per app, or @import '@dgesteves/agent-ui-kit/tailwind.css' with Tailwind v4
```

Or as source, with the shadcn CLI:

```bash
npx shadcn@latest add @agent-ui-kit/reasoning
```

```tsx
import { Reasoning } from '@/components/agent-ui/reasoning';
```

## Usage

```tsx
<Reasoning text={part.text} streaming={part.state === 'streaming'} />
```

## API reference

### Reasoning

Collapsible model reasoning. Opens automatically while the model thinks and
collapses to a one-line "Thought for 3.2s" summary when it finishes, unless
the user has toggled it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` (required) | `string` |  |  |
| `streaming` | `boolean` | `false` | The model is still reasoning. The panel opens while streaming and closes when done. |
| `durationMs` | `number` |  | Known reasoning duration in ms. Measured client-side when omitted. |
| `defaultOpen` | `boolean` |  |  |
| `open` | `boolean` |  |  |
| `onOpenChange` | `(open: boolean) => void` |  |  |
| `allowedImageHosts` | `readonly string[]` |  | Where images in the reasoning may load from: host names, `'self'` or `'*'`. See `MarkdownProps.allowedImageHosts`. |

Other props go to the root `<div>`: `className`, `id`, `aria-*`, `data-*` and event handlers.

## Accessibility

| Keys | Action |
| --- | --- |
| Enter Space | Show or hide the reasoning |

- A disclosure: the summary is a button with `aria-expanded`, and the text is the region it controls.
- It opens on its own while the model thinks and closes when it finishes, unless the reader opened or closed it themselves.
- The open and close animation runs only without `prefers-reduced-motion`.

## Theming

Slots (`data-slot`): `reasoning`.

- `data-streaming` on `reasoning`: set while the model is thinking

Tokens it uses: `--aui-accent`, `--aui-border-strong`, `--aui-fg`, `--aui-fg-muted`, `--aui-font-sans`, `--aui-ring`. See https://agent-ui-kit-demo.vercel.app/docs/getting-started#theming.