Chat Typing Indicator

Three-dot pulse and optional “Name is typing…” label.

Dots only

Minimal typing affordance.

default-example.tsx

1"use client";
2
3import { ChatTypingIndicator } from "@/registry/ui/chat-typing-indicator";
4
5export function ChatTypingIndicatorDefaultExample() {
6  return (
7    <div className="flex justify-center w-full max-w-lg p-4">
8      <ChatTypingIndicator />
9    </div>
10  );
11}

With name

Dots plus participant label.

Alex is typing...

with-name-example.tsx

1"use client";
2
3import { ChatTypingIndicator } from "@/registry/ui/chat-typing-indicator";
4
5export function ChatTypingIndicatorWithNameExample() {
6  return (
7    <div className="flex justify-center w-full max-w-lg p-4">
8      <ChatTypingIndicator userName="Alex" />
9    </div>
10  );
11}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/chat-typing-indicator