Reasoning Trace
A brand-led “Reasoning trail” shows how the answer was reached — a sequence of reasoning nodes stepping from complete, through the active move, to what is still pending.
Loading demo: reasoning-trace-real-world
Installation
npx sdaia-ui@latest add reasoning-disclosure reasoning-node thinking-step
Usage
import { ThinkingStep, ReasoningNode, ReasoningDisclosure } from "sdaia-ui"1<ReasoningNode2state="active"3title="Comparing policy applicability"4rationale="Checking entity type, jurisdiction, effective date, and exceptions."5/>
Building blocks
Thinking Step
A single line of thinking — an icon, a title and a short description.
Loading demo: thinking-step-default
Reasoning Node
A step with a state (active / complete / pending) and a rationale summary.
Loading demo: reasoning-node-default
Reasoning Disclosure
An expandable, full-inline summary that tucks the reasoning behind a toggle.
Loading demo: reasoning-disclosure-default
States
Active · Complete · Pending
Reasoning nodes move through active, complete and pending states as the trail progresses.
Loading demo: reasoning-node-states
API Reference
Thinking Step
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'neutral' | 'brand' | 'outline' | 'neutral' | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
icon | ReactNode | <ReasoningHeadIcon /> | optional |
title | ReactNode | 'Thinking step' | optional |
titleTrailing | ReactNode | — | optional |
description | ReactNode | — | optional |
as | ElementType | 'div' | optional |
Reasoning Node
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'neutral' | 'brand' | 'outline' | 'neutral' | optional |
state | 'active' | 'complete' | 'pending' | 'active' | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
icon | ReactNode | <ReasoningHeadIcon /> | optional |
title | ReactNode | 'Reasoning node' | optional |
statusLabel | ReactNode | state name | optional |
rationale | ReactNode | — | optional |
as | ElementType | 'div' | optional |
Reasoning Disclosure
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'neutral' | 'brand' | 'outline' | 'neutral' | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
expanded | boolean | — | optional |
defaultExpanded | boolean | false | optional |
onExpandedChange | (expanded: boolean) => void | — | optional |
icon | ReactNode | <ReasoningHeadIcon /> | optional |
title | ReactNode | 'Reasoning summary' | optional |
subtitle | ReactNode | '3 verified points · auditable' | optional |
items | ReasoningDisclosureItem[] | [] | optional |
expandLabel | string | 'Expand reasoning summary' | optional |
collapseLabel | string | 'Collapse reasoning summary' | optional |
as | ElementType | 'div' | optional |