Skip to content
Atomus

Reasoning

Shows the model’s working apart from its answer: “Thinking…” with a shimmer while it reasons, then “Thought for 12s”. It opens while thinking and collapses when done.

Live
  1. Load checkout.atomus.io in a headless browser (in progress)
  2. Run axe-core against WCAG 2.2 AA rules (pending)68 rules · 3 violations · 0 incomplete
  3. Group violations by component and draft fixes (pending)
Done, expanded
Thought for 12s
  1. Load checkout.atomus.io in a headless browser
  2. Run axe-core against WCAG 2.2 AA rules68 rules · 3 violations · 0 incomplete
  3. Group violations by component and draft fixes

The contrast issue comes from a hard-coded gray on the brand fill. Swapping it for text-on-brand fixes it in both modes.

status="thinking" → "done" · steps with pending, active and doneLive · light and dark follow the theme switch

Add the source to a shadcn project

npx shadcn@latest add https://docs.atomus.io/r/ai-reasoning.jsonOpen in v0

Installs the component source, its CSS and the Atomus tokens into components/atomus/. How the registry works

In Figma

Section titled “In Figma”

From guidelines/components/ai-reasoning.md

Properties, variants and anatomy of the Figma components. React props use the same names.

Reasoning

Section titled “Reasoning”

A collapsible disclosure for the model’s working: “Thinking…” with a shimmer while it reasons, then “Thought for 12s”. Inside, a short step list and optional free text, on a left rule in border-ai. It keeps the model’s working apart from its answer. Part of the Agent kit.

Figma: component set Reasoning on the 🤖 Agent kit page of Atomus 4.0 (node 25548:978), connected to React with Code Connect. Steps: Reasoning step (node 25548:901). React props use the same names as the Figma properties below.

Property Type / options
State Thinking · Done
Duration number (seconds)
Steps list (label, detail, status: Pending · Active · Done)
Expanded boolean
Label text

Anatomy

  1. Trigger: lightbulb in text-ai, label (“Thinking…” shimmer or “Thought for 12s”), chevron.
  2. Body: steps with status dots (gradient for active, text-ai for done, outline for pending), then free text.

Use for

  • Showing what a reasoning model or agent did before answering.
  • Multi-step plans the agent is working through.

Not for

  • Function calls with inputs and outputs: use Tool call.
  • The answer itself: put it in the Message content.

Accessibility

  • The trigger is a button with aria-expanded and aria-controls.
  • The finished label (“Thought for 12s”) is announced once in a status region.
  • Step status is also given as text (“in progress”, “pending”), not only by the dot.

Usage

Section titled “Usage”
import { Reasoning } from '@stanvision/atomus-react';


<Reasoning
  status={thinking ? 'thinking' : 'done'}
  duration={seconds}
  steps={[
    { label: 'Load the page', status: 'done' },
    { label: 'Run axe-core', detail: '68 rules', status: 'active' },
    { label: 'Draft fixes', status: 'pending' },
  ]}
>
  <p>{summary}</p>
</Reasoning>

Props at a glance

Section titled “Props at a glance”

Full types and defaults are in React API at the end of the page.

  • status — thinking or done; duration in seconds for “Thought for 12s”.
  • steps — label, detail and status (pending · active · done); children for free text.
  • open / defaultOpen / onOpenChange; autoCollapse closes it when thinking ends.

Design guidance

Section titled “Design guidance”

From the Figma guidelines.

Do

  • Open it while thinking and collapse it when done (autoCollapse, the default).
  • Write steps as short past-tense or present-tense lines a person can scan.
  • Summarise long raw thoughts; show the full text only on request.

Forbidden

  • Never put the answer or required decisions inside Reasoning — people may never open it.
  • Never show a duration for a step that is still running.

React API

Section titled “React API”

Generated from react/src/components by scripts/gen-react-api.mjs — the same tables agents read in guidelines/components/ai-reasoning.md.

Use only these props; anything else is not part of the API.

Reasoning

Section titled “Reasoning”

Figma: Reasoning — a collapsible “Thought for 12s” disclosure with the agent’s steps. Separates the model’s working from its answer (Primer: speaker clarity).

import { Reasoning } from '@stanvision/atomus-react'; — source: react/src/components/ai/Reasoning.tsx

Prop Type Default Description
status 'thinking' | 'done' 'done' Figma: State — thinking while the model reasons, done afterwards.
duration number — Figma: Duration — seconds spent thinking; the trigger reads “Thought for 12s”.
steps ReasoningStep[] — Figma: Steps — a short list of what the agent did.
children ReactNode — Free-form reasoning text (summary or raw thoughts) under the steps.
label string — Figma: Label — overrides “Thinking…” / “Thought for 12s”.
open boolean — Expanded (controlled)
defaultOpen boolean — Initial expanded state when uncontrolled. Defaults to open while thinking.
onOpenChange (open: boolean) => void — Called when the person expands or collapses it
autoCollapse boolean true Collapse automatically when status turns done (uncontrolled only).
className string — Extra class on the root element (layout only — never restyle colours or sizes).

Accepts only the props above.

ReasoningStep:

Field Type Description
id? string Stable key; defaults to the index
label ReactNode What the agent did or concluded, in one line
detail? ReactNode Optional supporting detail under the label
status? 'pending' | 'active' | 'done' done (default) · active (in progress) · pending (planned)