Reasoning

A thinking trace with a live line and timer. Its filament glows while it thinks and cools to a dim wire when done.

New in 1.6.Built on Icons.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/reasoning.json

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

<Reasoning streaming={thinking} duration={seconds}>
  {trace}
</Reasoning>

followStreaming opens the trace when thinking starts and folds it away when it ends. Toggle it by hand and it stays where you left it.

Finished traces sit above the answer they led to, folded unless they're worth reading.

A disclosure. A string child is split into paragraphs and renders `code` and **bold**.

Prop	Type	Default
`streaming`	`boolean` Hot filament, running timer and the live line.	`false`
`duration`	`number` Seconds spent. Measured while streaming when omitted.	None
`status`	`ReactNode` The live line. Defaults to the sentence being written when the trace is a string.	None
`open`	`boolean` Controlled open state.	None
`defaultOpen`	`boolean` Initial open state. With followStreaming, defaults to streaming.	`false`
`onOpenChange`	`(open: boolean) => void` Called on toggle, and when followStreaming opens or folds it.	None
`followStreaming`	`boolean` Open while thinking and fold when done, until toggled by hand.	`false`
`label`	`ReactNode` Header while streaming.	`"Thinking"`
`doneLabel`	`ReactNode` Header when done.	`"Thought for 12s"`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited

The header is a button with aria-expanded and aria-controls; a closed trace is hidden from assistive tech, not just collapsed.
A polite live region says Thinking when it starts and Thought for 12 seconds when it ends. Nothing is announced per token, and the live line and timer are hidden from screen readers.
Under prefers-reduced-motion the filament doesn't waver and the panel opens without animating; the coil still cools from lit to dim.