Browse all components

Thinking State

A minimal shimmering label that signals the agent is processing before it answers.

From AICSS ↗React, Vue & Svelte

Preview

Thinking

Install

Choose your framework below and copy the source into your project. For React, place the component and its CSS Module in the same folder, then import the component where you need it.

Code

Open source ↗

ThinkingState.tsx

"use client";

import styles from "./ThinkingState.module.css";

export function ThinkingState() {
  return <span className={styles.shimmer}>Thinking</span>;
}

Copy both the component and its CSS Module into the same folder.

Related components

Orbs ↗

Compact animated activity indicators for agent UIs - discrete DOM and CSS orbs that signal what the agent is doing without blocking the thread.

Thinking + Reasoning ↗

An animated, collapsible thinking block: a shimmering label expands to reveal the agent's reasoning, then folds into a “Thought for Ns” summary.