# Typing indicator

> Bouncing dots in a chat bubble with who is typing.

Component · Pro · https://lodeui.com/components/typing-indicator

## When to use

- Chats, support inboxes and AI assistants while a reply is being written.

## When not to use

- Long-running work: show progress instead.

## Installation

```bash
npx shadcn@latest add @lode/typing-indicator
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

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

<TypingIndicator names={typingUsers} />
```

## API reference

### TypingIndicator

Dots in a bubble plus who is typing; hidden when names is empty.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| names | `string[]` | – | People typing. |
| bubbleOnly | `boolean` | – | Hide the text visually (still read aloud). |

### typingText

Builds "Ada is typing" / "Ada and Grace are typing" / "Ada and 2 others are typing".

No props.

## Accessibility

- Changes are announced politely.

## Motion

- Dots bounce in sequence; the bubble springs in and out. Fades only under reduced motion.

## Responsive behavior

- Inline.

## Performance

- Three animated dots.

## Notes for AI

- Debounce typing events: clear a person after 3 seconds without keystrokes.

## Related

- [Chat message](https://lodeui.com/components/chat-message) — A chat turn with streaming cursor, copy, feedback and regenerate.
- [Team chat](https://lodeui.com/blocks/team-chat) — Team chat with channels, reactions, mentions, typing indicator and mobile drawer.
- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.