Thinking State

Installation

pnpm dlx shadcn@latest add @clover-ui/thinking-state

Usage

import { ThinkingState } from "@/components/thinking-state";

<ThinkingState />

A small pixel animation right next to a word, with no box around it, for showing what an agent or app is doing. The lit pixels draw each state's shape over a light gray grid that follows your theme, and a soft shimmer sweeps across the text, which uses your theme's text color. Each state has its own animation and color:

• thinking: a green trail of dots chasing in a loop.
• analyzing: light blue arcs scanning around a circle.
• debugging: a blue diagonal wave sweeping across.
• searching: a violet dot looping around with a trail.
• building: orange pixels stacking up row by row.
• pondering: pink ripples spreading out from the center.

<ThinkingState state="debugging" />

The text defaults to the state's name. Pass children to change it, and color to change the pixels:

<ThinkingState state="thinking" color="#a855f7">
  Galavanting
</ThinkingState>

Set status to show how the work ended. "complete" fades the lit pixels out and leaves the grid still. "error" settles into a red cross. Both turn the shimmer off. Switching state blends one animation into the next instead of jumping. Changing the text crossfades to the new word, so you can drive the label from your agent's progress:

<ThinkingState state="building" status={done ? "complete" : "active"}>
  {done ? "Built" : "Building"}
</ThinkingState>

The labels describe what the app is doing in general terms. They are not the model's private reasoning, so only show a reasoning summary when your AI provider actually returns one.

Set color="loop" to cycle smoothly through all the state colors. Set pixel="circle" for round dots arranged in a circle instead of a square grid, and grid={false} to hide the gray grid so only the lit pixels show on a transparent background.

Set the size with a text class in className. The pixels scale with the text. Set shimmer={false} to turn off the shimmer, and speed to make the animation faster or slower. When reduced motion is on, the pixels hold still and the text doesn't shimmer.

To color something else to match, like a timer, thinkingStateColors(state, status) returns the light and dark colors the pixels are using.

It has role="status", so screen readers announce the text when it changes. The pixel grid is hidden from screen readers. When reduced motion is on, the label swaps without sliding, and status changes jump straight to the still grid or the cross.

Props