Pieces/Chat(39)

Chat pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

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.

Soundcheck moved to 5pm, see you all there.

16:08Sending

Delivery Ticks

Outgoing bubble that walks through sending, sent, delivered and read: ticks swap in under the timestamp and a small seen-by row slides in at the end before the cycle restarts.

Erykah Badu
0:00 / 0:14

Voice Message

Voice note bubble with a fine waveform that swells to full height near the end, taking the accent color bar by bar as the playhead and timer advance.

Prince

Album art is final. Dropping the single Friday at midnight.

Reaction Burst

Emoji reactions spring onto a message one after another while their counts tick upward, hold for a beat, then clear and play again.

Nina SimoneActive now

Typing Conversation

Two-person thread that plays out once: a typing indicator bounces before each incoming reply, bubbles slide up as they land, and the finished conversation stays put.

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.

Answered fromRotaBookingsCancellations

Assistant Answer Card

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.

C

Care team

Online

Rowan's intake is ready for review.
Great, I'll approve the plan now.
Thanks, I'll book the first session.

Team Thread Card

A short message thread with a header contact, an online marker, and alternating incoming and outgoing bubbles.

Let's move the sync to 3pm instead.
Not delivered

Failed Message

Struck-through outgoing bubble with a rose alert dot, Not delivered label, and retry / delete actions.

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.

Payment request
$48.60
Dinner split · Packer's Coffee

Payment Request

Money request bubble with a direction arrow, large amount, optional italic note, and Pay / Decline actions.

Packer's Coffee · interior
Packer's CoffeeKuloğlu, Turnacıbaşı Cd. 29, 34433 Beyoğlu/İstanbul0.4 km away

Location Share

Chat bubble with a faux-map preview, a pulsing pin, and the place name, address, and distance beneath.

Message Actions

Floating toolbar with react, reply, copy, delete, and overflow actions. Delete tints rose.

0:09

“Hey, jumping on a call in five. Can you pull up the latest Figma file?”

Voice Transcription

Voice bubble with waveform and duration on top and a quoted italic transcript below the divider.

Search Result

Conversation search row with author and time above a message line where the match is amber-highlighted.

AKMÖ
Ayşe and Merve are typing

Multi Typing

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

Let's shift the sync to 3pm instead.
edited · 09:48

Edited Message

Standard chat bubble with a subtle italic edited caption beneath.

Reminder: Q2 planning notes due by noon tomorrow.
Sends Tomorrow · 08:00

Scheduled Message

Dashed-border outgoing bubble above a Clock chip showing when it will send.

Thread Chip

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

Reaction Picker

Rounded emoji picker with six quick reactions and a trailing plus for the full emoji palette.

Missed callAyşe Kaya · 09:42

Missed Call

Rose missed-call tile beside caller name and time, with a Call back action on the right.

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.

3 unread

Unread Divider

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

Message Ayşe

Composer

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

JD
John DoeActive now

Online Avatar

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

Markdown version