# Typing Indicator

Chat typing indicator with three dots that brighten in turn. When the reply arrives, the bubble grows to fit it and the words appear in reading order.

> Primitive · Free · Mobile-Native — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add typing-indicator
```

## Import

```tsx
import { TypingIndicator } from "@/components/ui/typing-indicator/typing-indicator";
```

## Variants

- `thread` — In a thread: `npx @lumioui/cli add typing-indicator-thread`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `visible?` | `boolean` | Show the dots. Switches on / dims out rather than hard-mounting. Default true. |
| `bubble?` | `boolean` | Wrap the dots in a received-message bubble surface. Default false. |
| `dotSize?` | `number` | Dot diameter in px. Default 8. |
| `speed?` | `number` | Multiplier on the ~1.2s light sweep. Default 1. |
| `color?` | `"primary" | "foreground" | "mutedForeground"` | Dot color token. Default "mutedForeground". |
| `message?` | `string` | The reply that ends the typing — the bubble grows into it, words igniting in order. |
| `maxWidth?` | `number` | Widest the reply text may wrap at, in pt. Default 260. |
| `onRevealed?` | `() => void` | Fires once the last word of `message` has ignited. |
| `accessibilityLabel?` | `string` | Screen-reader announcement while typing. Default "Typing…". |
| `className?` | `string` | — |

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