Dev Design LibraryOpen the library

Typing Indicator Components

Dev Design Library indexes 42 typing indicator components from 27 open-source UI libraries, with the most coming from Notra, ReactFrame, Halaska UI, Kokonut UI and AI CSS. Each one links to its page with the source code, a live preview where available, the library license and the install command. Typing indicator components belong to the Feedback group.

Ai Response StatusReact Spectrum · React
Thinking Statestransitions.dev · HTML/CSS
Thinking OrbsLibraries.dev · ReactDotted thought-orb loading indicators for AI & agent UIs — nine tuned states, two sizes, auto dark/light
Streaming reply with a pending stateReUI · ReactOne assistant row moving from thinking, to typing, to settled.
Typing IndicatorAmicro Micro Transitions · ReactTyping Indicator loading animation.
Chat Loading DotsLobe UI · React
AI State LoadingKokonut UI · ReactAgent progress as a list of steps with a live log, elapsed time and a summary when done.
Agent ActivitybeUI · ReactRenders progressive agent work as message content.
Matrix OrbRare UI · ReactA dot-matrix orb that animates through idle, listening and thinking states.
Thinking DotsSpectrum UI · ReactA minimal typing indicator — bouncing dots or a sliding bar.
Thinking IndicatorFluid Functionalism · ReactAnimated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through…
Input Group 01 - Autosave Typing IndicatorShadcn Space · ReactA premium text input field containing a real-time autosave status indicator (Saving spinner and Saved checkmark)…
Typing IndicatorKinetics · HTML/CSSThree dots bounce in sequence, chat-style
Agent ThinkingBoardUI · ReactAgent thinking indicators for chat composers.
LoaderAI Elements (Svelte) · SvelteA lightweight animated loader with a separate icon component.
ChatGPT ThinkingNotra · ReactThe shimmering Thinking placeholder.
Bars ThemeNexvyn UI · ReactA traveling-wave bars visualization with 5 vertical bars sharing a sine-wave frequency, evenly phase-shifted left to…
Inline LoaderGenerative Loaders · React
OrbAI CSS · React
Typing SeismographUI Lab · ReactRecords the rhythm of your typing on a scrolling seismograph.
LoaderLocalMode · ReactA small family of busy indicators (dots / pulse / typing / spinner) plus a Shimmer skeleton-text variant, shown while…
Agent Status PatternHalaska UI · React
ThinkingSpaceUI · React9 procedural Canvas 3D particle loader orbs representing AI cognitive states — working, searching, solving, listening…
Agent Loading StatesEaseUI · ReactThree loading states for AI interfaces: shimmering status text, live agent progress, and cycling reasoning phrases.
Glass MessageOpaline · ReactChat bubbles on glass: tinted for you, clear for them, with avatars, meta and a typing indicator.
Typing IndicatorFibo · ReactSays who's typing in a conversation, naming up to three people.
Discord Chat WidgetReactFrame · ReactA Discord-style chat bubble widget with a typing simulation, quick replies, a notification popup, member/online…
AI Text LoadingKokonut UI · ReactAI thinking text with a soft wave through the letters and words that swap letter by letter.
Composer LoaderBoardUI · ReactOrbiting light band for a working composer.
ShimmerAI Elements (Svelte) · SvelteA text shimmer utility component with configurable spread and duration.
Claude Code ThinkingNotra · ReactThe dim "∴ Thinking…" line that expands to the thoughts.
Text LoaderGenerative Loaders · React
Thinking StateAI CSS · React
Thinking IndicatorHalaska UI · React
Messenger WidgetReactFrame · ReactA Facebook Messenger-style chat bubble widget with a typing simulation, quick replies, a notification popup…
Claude ThinkingNotra · ReactThe animated spinner and rotating verb Claude shows before replying.
Telegram WidgetReactFrame · ReactA Telegram-style chat bubble widget with a typing simulation, quick replies, a notification popup, availability…
Codex WorkingNotra · ReactThe shimmering Working (13s • esc to interrupt) status line.
X (Twitter) WidgetReactFrame · ReactAn X (Twitter)-style DM chat bubble widget with a typing simulation, quick replies, a follows-you badge, availability…
Gemini ThinkingNotra · ReactThe animated Gemini sparkle with a shimmering status label.
OpenCode ActivityNotra · ReactOrange thoughts with a live Thinking spinner, plus muted read, web search and tool lines.
Perplexity ThinkingNotra · ReactThe shimmering Thinking... status shown before a search.

Libraries with typing indicator components

Related categories