Seen Receipt

09:42Read
About this piece

Seen Receipt

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

Usage

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

import { Chat10 } from "@/components/beste/piece/chat10";

<Chat10
  surface="card"
  bordered={true}
  inverted={false}
  time="09:42"
  status="read"
  sentLabel="Sent"
  deliveredLabel="Delivered"
  readLabel="Read"
/>

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.

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.

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.

Ayşe joined the conversation

System Message

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

09:44

Sticker

Oversized emoji as a standalone sticker message with a small timestamp beneath it.

Thread Chip

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