Online Avatar

JD
John DoeActive now
About this piece

Online Avatar

Avatar with a presence dot in emerald, amber, rose, or slate. Caption shows status or last-seen.

Usage

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

import { Chat16 } from "@/components/beste/piece/chat16";

<Chat16
  src="https://images.unsplash.com/photo-1583264277168-58ceba4b84e7?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE1fHx8ZW58MHx8fHx8"
  alt="John Doe"
  fallback="JD"
  name="John Doe"
  presence="online"
  lastSeen="Active now"
/>

More Chat pieces

View all Chat
AK
Ayşe and Merve are typing

Multi Typing

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

AK
Ayşe KayaDesigner09:42

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

Group Message

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

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.

Pinned by AyşeLaunch checklist → notion.so/beste/launch

Pinned Message

Amber-accented banner with a pin glyph, author caption, and the pinned message preview.

Studio team3 online
  • Nina SimoneOnline
  • Miles DavisIn a call
  • BjörkAway
  • Patti SmithOnline
  • Fela KutiOffline

Presence Roster

Compact team list where one member at a time changes presence: dots recolor, status text fades in, and the online count in the header keeps pace.

SB
Sarah Brown@sarah.b
Frontend at Kindred · Istanbul

Contact Card

Centered contact card with an avatar, name, handle, short bio, and a Message CTA.