Group Message

AK
Ayşe KayaDesigner09:42

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

About this piece

Group Message

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

Usage

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

import { Chat31 } from "@/components/beste/piece/chat31";

<Chat31
  src="https://images.unsplash.com/photo-1577806934037-32d94e326e84?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTkxfHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
  alt="Ayşe"
  fallback="AK"
  author="Ayşe Kaya"
  role="Designer"
  message="Pushed a new pass on the empty states — peek when you have a sec 🎨"
  time="09:42"
/>

More Chat pieces

View all Chat
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.

AKMÖSB
Design Team12 members

Group Header

Chat header with a 3-avatar stack, group title, member count, and voice / video call buttons.

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.

Thread Chip

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

09:44

Sticker

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

Message Ayşe

Composer

Rounded message composer with attach, inline text, emoji, and a smart send / mic button that flips with the value.