---
title: Reasoning
description: A collapsible reasoning disclosure that tracks streaming state and elapsed duration.
source: reasoning
---
```tsx title="primitives/reasoning/demos/basic.tsx"
"use client";
import { Reasoning } from "@intentface/chat/reasoning";
import { IconBrain, IconChevronDown } from "@tabler/icons-react";
// A completed reasoning block. The parts ship no copy and no layout — the
// trigger label and the section structure below are both yours.
const SECTIONS = [
{
header: "Planning the approach",
body: "Check the existing layout, then decide which axis needs centering.",
},
{
header: "Verifying",
body: "Confirm the element centers both horizontally and vertically.",
},
];
export const Basic = () => (
Thought for a few seconds
{SECTIONS.map((section) => (
{section.header}
{section.body}
))}
);
```
## Usage guidelines
- **Chain-of-thought disclosure** — a collapsible block for a model's thinking.
- **Live label** — shimmers "Thinking…" while streaming and settles to "Thought for Ns" when it stops; the duration is tracked for you.
- **Sectioned content** — bold `**Header**` lines split the text into labelled sections, rendered as markdown.
- **State via `useReasoning`** — read streaming, open, and duration from anywhere inside.
- **Get started** — see [Quick start](/quick-start) to add the package.
## Anatomy
```tsx
{reasoningText}
```
Driven from a streaming message, passing the reasoning parts' text:
```tsx
{texts}
```
## Examples
### Tracking the streaming state
`isStreaming` is the only input. While it is true the root carries
`data-streaming` and `aria-busy`; the moment it flips false the elapsed time is
captured and handed back as `duration`, so the trigger's label changes without
you timing anything.
```tsx title="primitives/reasoning/demos/streaming.tsx"
"use client";
import { Reasoning, useReasoning } from "@intentface/chat/reasoning";
import { IconBrain, IconChevronDown } from "@tabler/icons-react";
import { useEffect, useRef, useState } from "react";
const SECTIONS = [
"Check the existing layout, then decide which axis needs centering.",
"The parent is already a flex row, so only the cross axis is missing.",
"Confirm the element centers both horizontally and vertically.",
];
/*
* The part of Reasoning the hero demo cannot show: what happens while the
* model is still thinking.
*
* `isStreaming` is the only input. The root carries `data-streaming` and
* `aria-busy` while it is true, and the moment it flips false the elapsed time
* is captured and handed back through `useReasoning().duration` — so the
* trigger's label changes without the consumer timing anything.
*
* The text arrives on a timer here rather than from a model; the primitive
* neither knows nor cares where it comes from.
*/
export const Streaming = () => {
const [streaming, setStreaming] = useState(false);
const [shown, setShown] = useState([]);
const timers = useRef[]>([]);
useEffect(() => () => timers.current.forEach(clearTimeout), []);
const replay = () => {
timers.current.forEach(clearTimeout);
timers.current = [];
setShown([]);
setStreaming(true);
SECTIONS.forEach((section, index) => {
timers.current.push(
setTimeout(() => setShown((current) => [...current, section]), (index + 1) * 700),
);
});
timers.current.push(setTimeout(() => setStreaming(false), (SECTIONS.length + 1) * 700));
};
return (
);
};
/**
* The trigger ships no copy. `useReasoning` is how the label learns what to
* say: `isStreaming` while it runs, then `duration` once the package has
* captured it.
*/
const TriggerLabel = () => {
const { isStreaming, duration } = useReasoning();
return (
{isStreaming
? "Thinking…"
: duration === undefined
? "Reasoning"
: `Thought for ${duration}s`}
);
};
/*
* `--panel-height` is published only while a transition runs, and released once
* the panel settles open. That release is what lets the open panel keep growing
* as sections stream in: with the property gone the declaration is invalid at
* computed-value time and `height` lands back on `auto`.
*/
const PanelTransition = () => (
);
```
The panel animates through `--panel-height`, which is published only while a
transition runs and released once it settles open. That release is what lets an
open panel keep growing as sections stream into it.
## API reference
Every part accepts `className`, `style`, and `render` (see
[Styling](/handbook/styling)) and emits a bespoke part attribute (`data-`) unless noted.
### Reasoning
The disclosure root. Tracks how long `isStreaming` stayed true and hands the
elapsed seconds back through `useReasoning`, so a label can change without the
consumer timing anything. Renders a `
` element.
export const rootProps = [
{ name: "isStreaming", type: "boolean", default: "false", description: "While true the trigger shimmers; the streamed duration is captured when it flips false." },
{ name: "duration", type: "number", description: "Override the tracked streaming duration (seconds)." },
{ name: "defaultOpen", type: "boolean", default: "false", description: "Uncontrolled initial open state." },
{ name: "open", type: "boolean", description: "Controlled open state." },
{ name: "onOpenChange", type: "(open: boolean) => void", description: "Fires on toggle." },
];
export const rootAttrs = [
{ attribute: "data-reasoning", description: "The disclosure root." },
{ attribute: "data-streaming", description: "Present while isStreaming is true." },
{ attribute: "data-open", description: "Present while open." },
{ attribute: "data-closed", description: "Present while closed." },
];
### Reasoning.Trigger
The toggle. Ships no copy: supply the label as children, and read `isStreaming`
and `duration` from `useReasoning` if it should change while the model is
thinking. Renders a `