Thinking Indicator - terminal-kit

❯

# thinking-indicator

Animated thinking state while the agent works.

──

examples

❯

Default

Dim thinking row with the animated dot matrix.

Thinking…

❯

Dot matrix variations

TerminalDotMatrix is customizable — speed, trail, pulseCenter, dotSize, color, or fully custom frames for your own pattern.

default (spin)

fast · long trail

short trail

no center pulse

active tone

green · larger

custom frames (ripple)

──

install

npx shadcn@latest add "https://www.terminal-kit.com/r/thinking-indicator.json"

──

component api

ThinkingIndicator

Animated thinking state while the agent works. BusyIndicator is a deprecated alias.

Prop	Type	Default	Description
label	string	—	Status text. Alias for children when both are strings.
children	ReactNode	—	Status content. Overrides label when provided.
variant	"auto" \| "dots" \| "ascii" \| "cursor"	"auto"	auto — ASCII symbol loop on Claude, blinking cursor on grok, dot matrix on default. ascii, cursor, and dots force a specific animation.
tone	"default" \| "active"	"default"	Text emphasis — active uses brighter foreground.
dotProps	Partial<TerminalDotMatrixProps>	—	Customize the dot animation — speed, trail, pulseCenter, dotSize, color.
asciiProps	Partial<TerminalAsciiSpinnerProps>	—	Customize the Claude-style symbol loop — frames, speed, color. Defaults to CLAUDE_THINKING_FRAMES.
sessionTail	boolean	—	SessionContent integration — skip the streaming queue and render at the transcript tail (e.g. live thinking). Not used by ThinkingIndicator itself; SessionContent reads this off the child element.
className	string	—	Additional CSS classes.

advanced

TerminalDotMatrix

Low-level 3×3 dot animation primitive used by ThinkingIndicator.

Prop	Type	Default	Description
speed	number	120	Milliseconds per ring step (lower is faster).
trail	number	4	Number of cells that fade behind the comet head.
pulseCenter	boolean	true	Pulse the center dot as a core. Pass false to leave it dark.
dotSize	number	2	Dot size in pixels.
color	string	—	Override the dot color (any CSS color). Defaults to the tone color.
tone	"default" \| "active"	"default"	Color preset used when color is not set.
frames	ReadonlyArray<number[]>	—	Custom animation — a list of frames, each 9 opacity values (0–1) for the 3x3 grid, row-major. Overrides the built-in spin.