Typing indicatorPro
Bouncing dots in a chat bubble with who is typing.
Did the deploy go out?
Yes, 2 minutes ago 🚀
Ada is typing
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
Usage
Import it from @/components/ui/typing-indicator after installing.
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.
This page as Markdown, for assistants and coding agents:
/components/typing-indicator/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt