Typing Dots

A chat message bubble that shows three bouncing "typing" dots while an AI assistant is composing a reply, then swaps in the finished text — the classic "assistant is writing" indicator. Ported to React from MM Rahman Bappi's 100 Free AI UI Components (MIT).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Typing Dots to your project and fits it to your theme.

import TypingDots from "@/components/ui/typing-dots";

export default function TypingDotsDemo() {
  return (
    <div
      className="min-h-[400px] w-full flex items-center justify-center p-6"
      style={{ background: "var(--bg)" }}
    >
      <TypingDots />
    </div>
  );
}