A brand AI avatar leads a working-state cue: pulsing dots, a live activity line, or a reasoning disclosure that expands inline — filling the gap before the reply lands.
Loading demo: ai-thinking-indicator-real-world
npx sdaia-ui@latest add ai-thinking-indicator
import { AiThinkingIndicator } from "sdaia-ui"1<AiThinkingIndicator2state="reasoning"3style="neutral"4collapsedLabel="Show reasoning"5defaultOpen6>7The user asks about Vision 2030. I should outline its purpose — economic diversification — and the three pillars, then keep the answer concise and sourced.8</AiThinkingIndicator>
A pulsing typing animation for short waits — no copy yet.
Loading demo: ai-thinking-indicator-dots
A live activity line — a sparkle plus a short status label.
Loading demo: ai-thinking-indicator-activity
A collapsed reasoning preview — a “Show reasoning” toggle that expands.
Loading demo: ai-thinking-indicator-reasoning
The expanded reasoning preview — header, divider and the reasoning body.
Loading demo: ai-thinking-indicator-reasoning-open
Prop | Type | Default | Required |
|---|---|---|---|
style | 'neutral' | 'brand' | 'outline' | 'neutral' | optional |
state | 'dots' | 'activity' | 'reasoning' | 'dots' | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
icon | string | sparklesStroke | optional |
showAvatar | boolean | true | optional |
animated | boolean | true | optional |
label | ReactNode | 'Searching the web…' | optional |
collapsedLabel | ReactNode | 'Show reasoning' | optional |
title | ReactNode | 'Reasoning' | optional |
children | ReactNode | — | optional |
open | boolean | — | optional |
defaultOpen | boolean | false | optional |
onOpenChange | (open: boolean) => void | — | optional |
thinkingLabel | string | 'Thinking' | optional |
as | ElementType | 'div' | optional |