Shadcn.io is not affiliated with official shadcn/ui
Typing Indicator Text
Three-dot bouncing chat indicator with optional name prefix and configurable speed for React chat and AI streaming UIs.
Typing Indicator Text preview
The familiar three-dot "is typing" bubble, rebuilt as a tiny, composable React component. Three dots translate vertically on a phase-offset loop — each peaks 0.15 seconds after the previous — producing the gentle wave that's become shorthand for "someone is mid-message." A cubic-bezier ease gives the bounce its characteristic snap on the way up and softness on the way down, identical to iMessage and modern AI chat clients. Configure dot color (defaults to currentColor so it inherits from the parent), dot size, and a global speed multiplier for slower or more urgent feels. Drop in an optional name prefix to render "Alice is typing" — the dots align baseline-correctly with text either way.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the typing-indicator-text text effect into my projectRelated Components
Typing Text
Typewriter effect with blinking cursor
Text Cursor
Character trails that follow cursor movement
Text Generate Effect
Progressive word-by-word generation
Shimmering Text
Wave-like color shimmer across text
Flickering Text
Failing-fluorescent flicker effect
Blur Text
Text animation from blur to focus
FAQ
Was this page helpful?
Sign in to leave feedback.