Thinking Indicator

AI loading state with a fluid morphing sparkle glyph and cycling status words that slide through a soft blur with a shimmer sweep.

Installation

npx shadcn@latest add @iconiq/thinking-indicator

File Structure

Usage

import { ThinkingIndicator } from "@/components/ui/thinking-indicator";

export function ChatPending() {
  return (
    <ThinkingIndicator
      className="font-medium text-sm"
      words={["Thinking", "Reasoning", "Planning", "Refining"]}
    />
  );
}

Props

Props
Description

ThinkingIndicator

words

Status words cycled through while the indicator is visible, e.g. ["Thinking", "Reasoning", "Planning"]. Pass a single word to pin the label without cycling, or an empty array for a glyph-only indicator.

Type string[]

interval

How long each word stays on screen before the next slides in, in milliseconds.

Type number·Default 3200

showIcon

Show the morphing sparkle glyph before the label. Set to false for a text-only indicator, e.g. inline before a streamed reply.

Type boolean·Default true

className

Extra classes for the flex wrapper.

Type string

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Explain how the event loop works
Thinking…