Reasoning Text · paneui

Installation

pnpm dlx shadcn@latest add @paneui/reasoning-text

Usage

import { ReasoningText } from "@/components/ui/reasoning-text"

<ReasoningText phrases={["Thinking", "Reading the docs", "Drafting a reply"]} />

Examples

Spinners

Use to match the spinner to the tone of your interface.

Controlled Index

Use when you know the agent's real current step; it then stops cycling on its own.

Custom Indicator

Use when your product already has its own loading mark.

Without Ellipsis

Use when your phrases carry their own punctuation.

ASCII Spinner

Motion

Under reduced motion the swap mode cross-fades instead of blurring and rolling, the cascade mask stops sweeping, and AsciiSpinner holds its first frame with a soft pulse.

Accessibility

The line is a polite role="status" region. The current phrase is read from a screen-reader-only copy; the animated text and the spinner are aria-hidden.

API Reference

ReasoningText

A spinner plus a shimmering phrase that cycles while the agent works. Also accepts every prop of span.

phrases= ["Thinking", "Reading the context", "Weighing the options", "Drafting a reply"]: string[]; Phrases cycled while the agent works. A single phrase never changes.
mode= "swap": "swap" | "cascade" | "scramble"; Transition between phrases. swap blurs and rolls, cascade rolls letter by letter, scramble scrambles the letters.
interval= 2400: number; Milliseconds each phrase stays up.
index: number; Controlled phrase index; when set, the component stops cycling on its own.
shimmerDuration= 1.8: number; Seconds per shimmer sweep.
indicator: ReactNode; Leading glyph. Defaults to an AsciiSpinner; pass null to hide.
spinner= "braille": "braille" | "dots" | "line" | "star"; Frame set used by the default indicator.
ellipsis= true: boolean; Append an ellipsis to every phrase.

Prop	Type	Default	Description
phrases	string[]	["Thinking", "Reading the context", "Weighing the options", "Drafting a reply"]	Phrases cycled while the agent works. A single phrase never changes.
mode	"swap" \| "cascade" \| "scramble"	"swap"	Transition between phrases. `swap` blurs and rolls, `cascade` rolls letter by letter, `scramble` scrambles the letters.
interval	number	2400	Milliseconds each phrase stays up.
index	number	—	Controlled phrase index; when set, the component stops cycling on its own.
shimmerDuration	number	1.8	Seconds per shimmer sweep.
indicator	ReactNode	—	Leading glyph. Defaults to an `AsciiSpinner`; pass `null` to hide.
spinner	"braille" \| "dots" \| "line" \| "star"	"braille"	Frame set used by the default indicator.
ellipsis	boolean	true	Append an ellipsis to every phrase.

data-mode: The current mode.

Data attribute	Description
data-mode	The current `mode`.

AsciiSpinner

A decorative monospace glyph that ticks through terminal spinner frames. Also accepts every prop of span.

kind= "braille": "braille" | "dots" | "line" | "star"; Which frame set to cycle.
interval= 80: number; Milliseconds per frame.

Prop	Type	Default	Description
kind	"braille" \| "dots" \| "line" \| "star"	"braille"	Which frame set to cycle.
interval	number	80	Milliseconds per frame.