Typing Indicator

Who is currently typing. The animation is decorative and hidden from assistive tech; the sentence beside it is the actual content, and it is what gets announced.

src/components/ui/typing-indicator.tsx

About

From the component's own source, where it was written.

Who is currently typing.

The wording is built from the count rather than concatenated by the caller, because the grammar changes at every step: one name, two names joined by "and", then "and 3 others". Callers that build this string themselves get "Ada and are typing" the moment the list is empty.

The dots animate — the one place a pure-colour transition cannot carry the meaning, since "someone is typing right now" is inherently about liveness. They stop under prefers-reduced-motion, where the text still says it.

Install

npx astralyx-ui add typing-indicator

Usage

import { TypingIndicator } from '@/components/ui/typing-indicator'

<TypingIndicator names={['Ada', 'Marc']} />

Composer

Change the props and the source below follows.

Ada is typing

Props

people typing

avatars

tsx

<TypingIndicator names={['Ada']} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`TypingIndicator`

Who is currently typing.

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
names	string[]	required	Empty renders nothing. One and two are named; three or more collapse to "several people", because a list of five names is longer than the messages.
showAvatars	boolean	false	Stacked avatars instead of names, for a narrow column.
avatars	ReactNode	—	—

Behaviour

Topic	Detail	Description
motion	respects preference	The dots stop animating under `prefers-reduced-motion`; the text stays, since it carried the meaning all along.
announcement	polite	A live region set to polite, so it never interrupts a message being read.