Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Typing indicator

Who is writing a reply, under the conversation. Three dots breathe in turn beside a sentence that names them, collapsing to "and 3 others" when a room gets busy, and a polite live region says it once instead of on every keystroke.

Pro
pnpm dlx shadcn@latest add @caliper/typing-indicator

#launch-week

4 members · Amara is drafting the announcement

  • Copy for the hero is in the doc.

  • Reading it now, one sec.

Amara Okafor is typing…
Installs components/ui/typing-indicator.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

  • Chat, comments and support threads where a reply is on its way.
  • Inside a bubble at the end of a thread, with `compact`, when names would repeat what the avatars already say.

Skip it when

  • An assistant generating a reply; say what it is doing with the agent status.
  • Showing it for more than a few seconds after the last keystroke; stop it when typing stops.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Names, not a count
Up to three names are said in full; past that it is the first two "and n others", which reads naturally aloud.
Keeps its place
With nobody typing the row hides but keeps its height and live region, so messages do not jump and the next change is still announced.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/typing-indicator

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source. It is built from TypingIndicator and typingLabel.

example.tsx
import { TypingIndicator, typingLabel } from "@/components/ui/typing-indicator"

The worked example comes with Pro

The 33-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

TypingIndicator

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
people *readonly string[]—Who is typing right now, most recent first. Empty hides the row but keeps its live region.
compactbooleanfalseOnly the dots, for a bubble inside the thread; the sentence is still read out.

typingLabel

component

No props of its own; it accepts the native props of its root element.

Accessibility

It exposes status semantics, with aria-hidden and aria-live kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Threads examples