Date Separator

About this piece

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

Usage

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

import { Chat14 } from "@/components/beste/piece/chat14";

<Chat14
  label="Yesterday"
/>

3 unread

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

Ayşe joined the conversation

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

09:42Read

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

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

Ayşe KayaDesigner09:42

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

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

Hey, did you get a chance to look at the new onboarding flow?

09:42

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