Unread Divider

3 unread
About this piece

Unread Divider

Rose horizontal rule flanking an unread-count pill. Signals where new messages begin.

Usage

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

import { Chat18 } from "@/components/beste/piece/chat18";

<Chat18
  count={3}
/>

More Chat pieces

View all Chat
Yesterday

Date Separator

Thin horizontal rule with a muted date pill in the middle, used to break up chat days.

Thread Chip

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

09:42Read

Seen Receipt

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

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.

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 and Merve are typing

Multi Typing

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