Multi Typing

AK
Ayşe and Merve are typing
About this piece

Multi Typing

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

Usage

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

import { Chat25 } from "@/components/beste/piece/chat25";

<Chat25
  typers={[
    {
      "src": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face",
      "alt": "Ayşe",
      "fallback": "AK"
    },
    {
      "src": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face",
      "alt": "Merve",
      "fallback": "MÖ"
    }
  ]}
  summary="Ayşe and Merve are typing"
/>

More Chat pieces

View all Chat
SB

Typing Indicator

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

09:42Read

Seen Receipt

Timestamp pill with double-check icon that colors sky when the message is read.

Thread Chip

Thread pill with a 3-avatar stack, a reply count in primary, and a last-reply timestamp.

AK
Ayşe KayaDesigner09:42

Pushed a new pass on the empty states — peek when you have a sec 🎨

Group Message

Avatar plus inline author, optional role chip, timestamp, and the message body beneath.

Ayşe joined the conversation

System Message

Muted centered pill with an icon, used for joins, role changes, and other neutral system events.

AK
Ayşe Kaya09:42
Sure, sending the Figma link now3

Conversation Item

Inbox row with avatar, name, message preview, timestamp, and a primary unread count chip.