Loading…

AI Reasoning

A collapsible disclosure for the model's reasoning.

AI
1 file
1 npm package
Accessibility notes

Playground

Installation

The CLI installs shimmer-text as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add ai-reasoning

npm packages installed: radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Reasoning } from "@/components/ui/ai-reasoning";

Examples

Every example the tests run, live and operable, side by side.

Default
Streaming
Expanded
Auto Open Collapse
With Duration
Shimmer

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Reasoning>

Prop	Type	Default
`autoCollapse` Close after streaming ends, unless the reader has toggled it; a number is the delay in milliseconds. Never closes while focus or the pointer is inside the trace. Ignored when `open` is controlled.	`boolean \| number`	`false`
`autoOpen` Open when `streaming` turns true, until the reader toggles it themselves. Off by default (ADR 0009): an open trace gives reasoning the same weight as the answer while it streams. Ignored when `open` is controlled.	`boolean`	`false`
`onOpenChange` Called when the reader opens or closes the trace.	`(open: boolean) => void`	—
`streaming` Reasoning is still arriving. Feeds the trigger's default label and the auto behaviours below.	`boolean`	—

Every prop of Radix UI’s Collapsible.Root, plus className.

<ReasoningTrigger>

Prop	Type	Default
`duration` Seconds spent reasoning. When set and not streaming, the label becomes `durationLabel(duration)`. Pair it with `useElapsedSeconds`.	`number`	—
`durationLabel` Words for a duration.	`(seconds: number) => string`	`defaultDurationLabel`
`label`	`string`	`"Reasoning"`
`shimmer` Shimmer the label while streaming. Decoration: it stops under reduced motion.	`boolean`	`false`
`streaming` Shown while reasoning is still arriving. Defaults to the root's `streaming`.	`boolean`	—
`streamingLabel`	`string`	`"Thinking…"`

Every prop of Radix UI’s Collapsible.Trigger, plus className.

<ReasoningContent>

Every prop of Radix UI’s Collapsible.Content, plus className.

Accessibility

A standard disclosure with aria-expanded on the trigger. Collapsed by default because reasoning is supporting material — giving it the same weight as the answer buries the answer. The trigger's label changes while reasoning streams, so its accessible name matches what is happening — and to "Thought for 4.2s" when given a duration. autoOpen and autoCollapse are opt-in; auto-collapse never closes the trace while focus or the pointer is inside it. The optional shimmer is decoration and stops under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

autoCollapse

Close after streaming ends, unless the reader has toggled it; a number is the delay in milliseconds. Never closes while focus or the pointer is inside the trace. Ignored when open is controlled.

boolean | number

false

autoOpen

Open when streaming turns true, until the reader toggles it themselves. Off by default (ADR 0009): an open trace gives reasoning the same weight as the answer while it streams. Ignored when open is controlled.

boolean

false

onOpenChange

Called when the reader opens or closes the trace.

(open: boolean) => void

—

streaming

Reasoning is still arriving. Feeds the trigger's default label and the auto behaviours below.

boolean

—

Prop

Type

Default

duration

Seconds spent reasoning. When set and not streaming, the label becomes durationLabel(duration). Pair it with useElapsedSeconds.

number

—

durationLabel

Words for a duration.

(seconds: number) => string

defaultDurationLabel

label

string

"Reasoning"

shimmer

Shimmer the label while streaming. Decoration: it stops under reduced motion.

boolean

false

streaming

Shown while reasoning is still arriving. Defaults to the root's streaming.

boolean

—

streamingLabel

string

"Thinking…"