Thinking Indicator

Pro

AI working state with a gently pulsing label and steps that check off as they finish, in a fold-out list or a pill. When done it settles into a summary like “Researched for 8s”.

Preview

Installation

npx @lumioui/cli add pro/thinking-indicator

Usage

import { formatSeconds, ShimmerText, ThinkingSteps, ThinkingIndicator } from "@/components/ui/thinking-indicator/thinking-indicator";
<ThinkingIndicator />

Also exported: formatSeconds, ShimmerText, ThinkingSteps.

Examples

Chat assistant

A notes app assistant.

Research steps

A deep-research card in a home-energy planner.

Shopping pill

A store's shopping assistant.

Voice caption

A voice assistant on a dark stage.

API reference

ThinkingIndicator

Prop Type Default
active boolean

Work in progress. When it flips false the light settles into doneLabel. Default true.

 true
label string

Working label. Default "Thinking". Pill/caption prefer the active step's label.

 "Thinking"
doneLabel string | ((seconds: number) => string)

Settled label — string, or a function of elapsed seconds. Default "Worked for 12s".

 defaultDone
steps ThinkingStep[]

Ordered steps; their statuses drive the ticks.

 —
summary React.ReactNode

Reasoning summary shown inside the expanded body (inline variant).

 —
elapsed number

Controlled elapsed seconds. Omit to count from when active turns true.

 —
showElapsed boolean

Show the running "· 6s" counter beside the label (inline). Default true.

 true
expanded boolean

Controlled expanded state (inline).

 —
defaultExpanded boolean

Uncontrolled initial expanded state (inline). Default false.

 false
onExpandedChange (expanded: boolean) => void —
onResolved () => void

Fires once per resolve, after the resolved label has held — mount the answer here.

 —
variant "inline" | "pill" | "caption"

Layout. Default "inline".

 "inline"
leading React.ReactNode

Slot before the label — an avatar or glyph (inline / pill).

 —
className string —

ShimmerText

Prop Type Default
text* string —
active boolean

Breathe while true; when false the label settles to full brightness. Default true.

 true
textClassName string

Type + colour classes for the label. Set a text- colour.

 —
className string —

ThinkingSteps

Prop Type Default
steps* ThinkingStep[] —
className string —