---
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 type { ComponentProps } from "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}
))}
);
const BrainIcon = (props: ComponentProps<"svg">) => (
);
const ChevronIcon = (props: ComponentProps<"svg">) => (
);
```
## 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}
```
## useReasoning
Read the disclosure state from anywhere inside ``:
export const hookMembers = [
{ name: "isStreaming", type: "boolean", description: "Whether reasoning is still streaming in." },
{ name: "isOpen", type: "boolean", description: "Whether the panel is open." },
{ name: "setIsOpen", type: "(open: boolean) => void", description: "Toggle the panel." },
{ name: "duration", type: "number | undefined", description: "Tracked streaming duration in seconds." },
];
## Accessibility
Built on a disclosure: `Reasoning.Trigger` is a `