Add this component

npx zentauri-ui add typing-indicator

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Feedback

Typing indicator for chat and messaging

Use the typing indicator component to show when another user or assistant is composing a message. The three animated dots provide familiar real-time feedback for chat interfaces, comment sections, and AI response streams.

Typingis typing

Typing indicator variants playground

Pick an appearance, size, dot count, and animation to preview the typing indicator live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Appearance

Size

Dots

Label

Animation

All appearances

Every shipped appearance token at a glance. Click any swatch to load it into the playground above.

Typing Indicator API

Generated from the package prop types and variant definitions.

TypingIndicator

TypingIndicatorProps

Variants

Prop	Type	Default
size	`lgmdsm`	md

Behavior

Prop	Type	Default
appearance	`'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'red' \| 'slate' \| 'zinc' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-purple' \| 'gray' \| 'subtle' \| 'muted' \| 'primary' \| null \| undefined`	none
dots	`TypingIndicatorDots \| undefined`	none
label	`ReactNode`	none
labelPosition	`'before' \| 'after' \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLSpanElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

TypingIndicatorVariant

TypingIndicatorVariantProps

Behavior

Prop	Type	Default
appearance	`'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'red' \| 'slate' \| 'zinc' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-purple' \| 'gray' \| 'subtle' \| 'muted' \| 'primary' \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

TypingIndicatorAnimated

TypingIndicatorAnimatedProps

animated

Behavior

Prop	Type	Default
animation	`TypingIndicatorAnimation \| undefined`	none
appearance	`'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'red' \| 'slate' \| 'zinc' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-purple' \| 'gray' \| 'subtle' \| 'muted' \| 'primary' \| null \| undefined`	none
dots	`TypingIndicatorDots \| undefined`	none
label	`ReactNode`	none
labelPosition	`'before' \| 'after' \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLSpanElement> \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLSpanElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CSS variable overrides

Typing indicator CSS variables

Override these typing indicator variables on :root, a theme selector, or a component wrapper.

56 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-typing-indicator-default-dot-bg: oklch(20.8% 0.042 265.755);
  --zui-typing-indicator-subtle-dot-bg: oklch(92.9% 0.013 255.508);
  --zui-typing-indicator-muted-dot-bg: oklch(44.6% 0.043 257.281);
  --zui-typing-indicator-primary-dot-bg: oklch(20.8% 0.042 265.755);
  --zui-typing-indicator-blue-dot-bg: #2563eb;
  --zui-typing-indicator-cyan-dot-bg: #0891b2;
  --zui-typing-indicator-green-dot-bg: #16a34a;
  --zui-typing-indicator-lime-dot-bg: #65a30d;
  --zui-typing-indicator-emerald-dot-bg: oklch(69.6% 0.17 162.48);
  --zui-typing-indicator-indigo-dot-bg: oklch(39.8% 0.195 277.366);
  --zui-typing-indicator-purple-dot-bg: oklch(43.8% 0.218 303.724);
  --zui-typing-indicator-pink-dot-bg: oklch(45.9% 0.187 3.815);
  --zui-typing-indicator-rose-dot-bg: oklch(64.5% 0.246 16.439);
  --zui-typing-indicator-sky-dot-bg: oklch(68.5% 0.169 237.323);
  --zui-typing-indicator-teal-dot-bg: oklch(70.4% 0.14 182.503);
  --zui-typing-indicator-yellow-dot-bg: oklch(79.5% 0.184 86.047);
  --zui-typing-indicator-orange-dot-bg: oklch(70.5% 0.213 47.604);
  --zui-typing-indicator-red-dot-bg: #dc2626;
  --zui-typing-indicator-slate-dot-bg: #475569;
  --zui-typing-indicator-gray-dot-bg: oklch(55.1% 0.027 264.364);
  --zui-typing-indicator-zinc-dot-bg: #52525b;
  --zui-typing-indicator-gradient-blue-from: oklch(42.4% 0.199 265.638);
  --zui-typing-indicator-gradient-blue-to: oklch(43.8% 0.218 303.724);
  --zui-typing-indicator-gradient-green-from: oklch(44.8% 0.119 151.328);
  --zui-typing-indicator-gradient-green-to: oklch(45.3% 0.124 130.933);
  --zui-typing-indicator-gradient-purple-from: oklch(43.8% 0.218 303.724);
  --zui-typing-indicator-gradient-purple-to: oklch(45.9% 0.187 3.815);
  --zui-typing-indicator-label-fg: oklch(44.6% 0.043 257.287);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-typing-indicator-default-dot-bg-dark: oklch(98.4% 0.003 247.858);
  --zui-typing-indicator-subtle-dot-bg-dark: oklch(27.9% 0.041 260.031);
}

What it does

The typing indicator renders a series of animated dots that signal active composition. The default static variant uses CSS keyframe animations (bounce) while the animated variant offers framer-motion powered transitions including bounce, pulse, and wave.

Combine with a label displayed before or after the dots for additional context like "Typing..." or "is typing".

Composition and API

Choose the number of dots (3-5), pick an appearance from the full color palette, and optionally attach a label. The component ships two variants: the default static entry uses pure CSS animations with zero JavaScript runtime cost, while the animated entry (imported from the /animated subpath) provides framer-motion enhanced transitions.

Common use cases

Show active typing status in direct messaging interfaces.
Indicate AI assistant response generation in chat applications.
Display comment composition in social platforms.
Signal background processing in collaborative editing tools.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Typing Indicator component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize the typing indicator with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Typing Indicator implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.