Wensity

AI Typing Indicator

Pro

A typing indicator for React AI chat: typing dots in a bubble, or a thinking label that names each step with its own icon.

aichatchatbottyping indicatortyping dotsloadingllm
AI Typing Indicator component preview

Overview

AI Typing Indicator is a React and Tailwind CSS typing indicator that shows a chatbot is busy, in Next.js or any React app. Choose typing dots in a reply bubble, a shimmering label, a letter wave, or a dot matrix that ripples from its center. Pass phrases such as Searching the web and each step gets its own animated icon, picked from its words unless you set one. Elapsed seconds restart whenever the phrases loop and appear only on the shimmer and wave variants. Screen readers hear the label once, not every phrase, and reduced motion holds each icon still.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add ai-typing-indicator

Usage

Import AiTypingIndicator from @/components/wensity/ai-typing-indicator and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { AiTypingIndicator } from "@/components/wensity/ai-typing-indicator";


export default function Example({ status }: { status: "thinking" | "streaming" | "done" }) {
  if (status === "thinking") {
    return <AiTypingIndicator phrases={["Thinking", "Searching the web", "Writing"]} showElapsed />;
  }
  if (status === "streaming") return <AiTypingIndicator variant="dots" label="Typing" />;
  return null;
}

Props

PropTypeDefaultDescription
variant"dots" | "shimmer" | "wave" | "matrix""shimmer"Dots in a reply bubble, a shimmering label with a turning glyph, letters that lift in a wave, or a rippling grid of points.
labelstring"Thinking"What the indicator says. Screen readers hear it for every variant.
phrases(string | { label, icon })[]-States to cycle through, each blurring in over the last with its own animated icon. A plain string picks its icon from its words. Overrides label on screen.
icon"think" | "search" | "read" | "write" | "code"from labelIcon for the label when there are no phrases.
intervalnumber2400Milliseconds each phrase stays.
showElapsedbooleanfalseCounts the seconds of the current run, starting over each time the phrases loop. Shimmer and wave only.
bubblebooleantrueDraws the dots inside a reply bubble.
size"sm" | "md" | "lg""md"Text size that every part scales from.

Related components

  • AI Prompt Input component preview

    AI Prompt Input

    An expanding prompt area with a glowing drop zone that breathes open to meet you as you type a thought or drag a file.

  • Animated Loading Skeleton component preview

    Animated Loading Skeleton

    An organic loading state instead of a spinner, with a slow aurora that breathes in the space where your content will land.

  • Voice Reactive Orb component preview

    Voice Reactive Orb

    A breathing voice orb that swells with speech and settles between turns, never jittery and always organic to look at.

  • AI Model Selector component preview

    AI Model Selector

    An AI model selector dropdown that scales out from its trigger and glides the selection pill to whichever model you pick.

Featured in React AI chat UI components.