Reasoning

A React component in Beamline's AI & agents category.

The agent's trace, fed by your stream: a shimmering label and the seconds so far while it works, then "Thought for N seconds"; steps that check off, prose thoughts, search sources or tool calls, open while running and folded when done.

Use it for

Showing what an agent did while thinking: steps, searches, code, collapsible afterwards.

Not for

The answer itself (response).
Tool calls with inputs and outputs to inspect (tool-call).
A plan that needs approval (plan).

Anatomy

header button: glyph, label (shimmer while running), seconds, chevron
trace (ordered list with a guide line)
query row (search)
rows: step check or spinner / source glyph and link / prose / tool with +/− lines
+N more
polite announcement when a run finishes

Variants

variant: steps, reasoning, search, coding

States

running (open, shimmer, elapsed seconds)
done (folded, "Thought for N seconds" or doneLabel)
opened or closed by the person (kept until a new run)
controlled (open / onOpenChange)

Keyboard

Enter/Space on the header toggles the trace (aria-expanded)
Closed traces are out of the Tab order
Search rows are links

Motion

The label shimmers while running (still under reduced motion); the trace opens on --motion-in and folds on --motion-out (disclosure-panel); a step that arrives while it runs grows to its height (enter-grow, --duration-morph) and rises in once (enter-rise), so the content below glides; the label eases to each new width (useWidthMorph) so the chevron glides instead of jumping.

Props

Prop	Type	Default	Description
`rows` (required)	`ReasoningRow[]`	—	{ id?, primary, secondary?, mono?, add?, del?, href? }
`variant`	`"steps" \| "reasoning" \| "search" \| "coding"`	—
`status`	`"running" \| "done"`	—
`activeLabel / doneLabel / startedAt`	`string / string / number`	—
`query / more / icon`	`string / number / ReactNode`	—
`open / defaultOpen / onOpenChange`	`boolean`	—
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`ReasoningClassNames`	—

Built from

text-shimmer
spinner

Dependencies

lucide-react

Import

import { Reasoning } from "@/components/reasoning/reasoning";

Get it

Reasoning is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent