Typing Indicator

SB
About this piece

Typing Indicator

Chat bubble with three staggered dots. Signals that the other side is typing.

Usage

The import and the props worth knowing about, in one place.

import { Chat2 } from "@/components/beste/piece/chat2";

<Chat2
  avatarSrc="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face"
  avatarAlt="Sarah Brown"
  fallback="SB"
/>

More Chat pieces

View all Chat
AK
Ayşe and Merve are typing

Multi Typing

Typing indicator pill showing multiple avatar stack, summary text, and three pulsing dots.

Nina SimoneActive now

Typing Conversation

Two-person thread that plays out once: a typing indicator bounces before each incoming reply, bubbles slide up as they land, and the finished conversation stays put.

Shipped the v2 onboarding this morning 🚀
421

Reaction Bubble

Message bubble with a small floating reaction chip tucked into the bottom corner.

Let's shift the sync to 3pm instead.
edited · 09:48

Edited Message

Standard chat bubble with a subtle italic edited caption beneath.

Reminder: Q2 planning notes due by noon tomorrow.
Sends Tomorrow · 08:00

Scheduled Message

Dashed-border outgoing bubble above a Clock chip showing when it will send.

AK
Hey, did you get a chance to look at the new onboarding flow?
09:42

Message Bubble

Chat bubble with an avatar and timestamp. Role flips alignment and color.