# Thinking Indicator

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”.

> Composed · Pro · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/thinking-indicator
```

## Import

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

## Variants

- `chat` — Chat assistant: `npx @lumioui/cli add pro/thinking-indicator-chat`
- `research` — Research steps: `npx @lumioui/cli add pro/thinking-indicator-research`
- `shopping` — Shopping pill: `npx @lumioui/cli add pro/thinking-indicator-shopping`
- `voice` — Voice caption: `npx @lumioui/cli add pro/thinking-indicator-voice`

## Props

### ThinkingIndicator

| Prop | Type | Notes |
| --- | --- | --- |
| `active?` | `boolean` | Work in progress. When it flips false the light settles into `doneLabel`. Default true. |
| `label?` | `string` | Working label. Default "Thinking". Pill/caption prefer the active step's label. |
| `doneLabel?` | `string | ((seconds: number) => string)` | Settled label — string, or a function of elapsed seconds. Default "Worked for 12s". |
| `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. |
| `expanded?` | `boolean` | Controlled expanded state (inline). |
| `defaultExpanded?` | `boolean` | Uncontrolled initial expanded state (inline). Default 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". |
| `leading?` | `React.ReactNode` | Slot before the label — an avatar or glyph (inline / pill). |
| `className?` | `string` | — |

### ShimmerText

| Prop | Type | Notes |
| --- | --- | --- |
| `text` | `string` | — |
| `active?` | `boolean` | Breathe while true; when false the label settles to full brightness. Default true. |
| `textClassName?` | `string` | Type + colour classes for the label. Set a text- colour. |
| `className?` | `string` | — |

### ThinkingSteps

| Prop | Type | Notes |
| --- | --- | --- |
| `steps` | `ThinkingStep[]` | — |
| `className?` | `string` | — |

Source: https://lumioui.com/components/thinking-indicator