# Reasoning

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

Source: https://signoff-ui.vercel.app/docs/components/reasoning

## Installation

From npm:

```bash
npm i signoff-ui ai
```

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

Or as source, with the shadcn CLI:

```bash
npx shadcn@latest add https://signoff-ui.vercel.app/r/reasoning.json
```

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

## Usage

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

## How it works

The model's reasoning, open while it streams and collapsed once it's done (unless you opened or closed it yourself), with how long the model thought ("Thought for 1.7s"). The text renders through `Markdown`, with the same `allowedImageHosts`.

## 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`. |
| `labels` | `SignoffLabelsInput` |  | Words to use instead of the English defaults: see `SignoffLabelsProvider`. |

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`): `signoff-reasoning`.

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

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