Typing Indicator

The pre-first-token state — distinct from a Spinner's generic loading. It says someone is about to talk, so it sits where the assistant's reply will land.

tsx
import { TypingIndicator } from "@/registry/seam/ui/typing-indicator"

export default function TypingIndicatorDemo() {
  return (
    <div className="flex h-10 items-center">
      <TypingIndicator />
    </div>
  )
}
bunx --bun @seamui/cli@latest add typing-indicator

Notes

  • seamui's reference case for reduced motion as a variant: the dots bounce on a staggered springs.bouncy loop (the one sanctioned use), and under reduced motion the bounce becomes a staggered opacity pulse — the feedback is never removed, it just stops traveling.
  • Render it while awaiting the first token (e.g. status === "submitted" from the AI SDK's useChat).
  • The container is a role="status" labeled “Assistant is typing”; the individual dots are aria-hidden, so the state is announced once rather than as three moving elements.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.