Agent Thinking
The agent thinking state that sits above a chat composer while a response is being worked on. Four curated variants - a dot grid crossed by a diagonal wave, a dot grid with an orbiting head, twinkling stars, and an infinity comet - each pairing its indicator with a shimmering label and an elapsed timer.
Installation
You can add this loader component using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add agent-thinkingDot wave
A 3×3 dot grid crossed by a diagonal wavefront - a bright band enters at the top-left, glides to the bottom-right with a fading trail, and re-enters after a beat. The default variant.
<AgentThinking variant="wave" />Dot spin
The same grid with a bright head orbiting clockwise, trailing a comet tail - reads as steady rotation without a spinner glyph.
<AgentThinking variant="spin" />Stars
Five four-point sparkles twinkling in and out on a stagger. Defaults to the subtle tone so it reads quieter than the dot grids.
<AgentThinking variant="stars" />Infinity
A comet trail lapping a figure-eight over a faint track - continuous motion with no start or end, for long-running agent work.
<AgentThinking variant="infinity" />Label, tone, and timer
Every variant shares the same options: label sets the status copy, showTimer toggles the elapsed seconds, shimmer toggles the traveling highlight, and tone overrides the per-variant default color. All motion falls back to a static state under prefers-reduced-motion.
{/* Status copy and elapsed timer */}<AgentThinking variant="spin" label="Searching the docs" /><AgentThinking variant="wave" showTimer={false} />
{/* Tone defaults per variant (stars is subtle); override with `tone` */}<AgentThinking variant="infinity" tone="accent" />
{/* Static label instead of the traveling shimmer */}<AgentThinking variant="wave" shimmer={false} />