Chat header with a 3-avatar stack, group title, member count, and voice / video call buttons.
The import and the props worth knowing about, in one place.
import { Chat3 } from "@/components/beste/piece/chat3";
<Chat3
surface="card"
bordered={true}
inverted={false}
title="Design Team"
count={12}
membersLabel="members"
members={[
{
"src": "https://images.unsplash.com/photo-1600603405959-6d623e92445c?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDF8fHxlbnwwfHx8fHw%3D",
"alt": "Ayşe",
"fallback": "AK"
},
{
"src": "https://images.unsplash.com/photo-1728516687021-905c3feb5046?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D",
"alt": "Merve",
"fallback": "MÖ"
},
{
"src": "https://images.unsplash.com/photo-1731341711390-a721b4e31b6a?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDd8fHxlbnwwfHx8fHw%3D",
"alt": "Sarah",
"fallback": "SB"
}
]}
/>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.
Chat bubble with an avatar and timestamp. Role flips alignment and color.
Event invite bubble with title, date, time, attendee count, and Join / Maybe actions.