terminal-kit/components/thinking-indicator.tsx
$
cat components/thinking-indicator.tsx
# 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)
──
component api
ThinkingIndicator
PropTypeDefaultDescription
labelstringStatus text. Alias for children when both are strings.
childrenReactNodeStatus content. Overrides label when provided.
variant"dots" | "cursor""dots"Animation style for the thinking state.
tone"default" | "active""default"Text emphasis — active uses brighter foreground.
dotPropsPartial<TerminalDotMatrixProps>Customize the dot animation — speed, trail, pulseCenter, dotSize, color.
sessionTailbooleanWhen nested in SessionContent, render outside the streaming queue at the transcript tail.
classNamestringAdditional CSS classes.
TerminalDotMatrix
PropTypeDefaultDescription
speednumber120Milliseconds per ring step (lower is faster).
trailnumber4Number of cells that fade behind the comet head.
pulseCenterbooleantruePulse the center dot as a core. Pass false to leave it dark.
dotSizenumber2Dot size in pixels.
colorstringOverride the dot color (any CSS color). Defaults to the tone color.
tone"default" | "active""default"Color preset used when color is not set.
framesReadonlyArray<number[]>Custom animation — a list of frames, each 9 opacity values (0–1) for the 3x3 grid, row-major. Overrides the built-in spin.
──
install
npx shadcn@latest add "https://www.terminal-kit.com/r/thinking-indicator.json"