Centered contact card with an avatar, name, handle, short bio, and a Message CTA.
The import and the props worth knowing about, in one place.
import { Chat8 } from "@/components/beste/piece/chat8";
<Chat8
src="https://images.unsplash.com/photo-1672794776762-18dddc72982e?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQzfHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
alt="Sarah Brown"
fallback="SB"
name="Sarah Brown"
handle="@sarah.b"
bio="Frontend at Kindred · Istanbul"
/>How many rooms were unused last Tuesday?
Three, all at Kingsway between 13:00 and 16:00. Two were held for a clinic that was cancelled on the Friday before.
An assistant exchange showing the question as a right-aligned bubble, the answer beside an accent icon tile, and the records it was drawn from as chips under a hairline.
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.
Inbox row with avatar, name, message preview, timestamp, and a primary unread count chip.