Pieces/Chat

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

AK
Hey, did you get a chance to look at the new onboarding flow?
09:42

Message Bubble

chat1

Chat bubble with an avatar and timestamp. Role flips alignment and color.

SB

Typing Indicator

chat2

Chat bubble with three staggered dots. Signals that the other side is typing.

AKSB
Design Team12 members

Group Header

chat3

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

Where are we grabbing lunch?
  • Packer's Coffee6
  • Sushi place3
  • Stay in, order pizza9
18 votes

Poll Message

chat4

Chat bubble with a question and voting options. Each row fills proportionally to its vote count.

Shipped the v2 onboarding this morning 🚀
421

Reaction Bubble

chat5

Message bubble with a small floating reaction chip tucked into the bottom corner.

On call with Ayşe Kaya02:14

Call In Progress

chat6

Live-call banner with a pinging video glyph, caller name, running duration, mute toggle, and end-call button.

Replying to Ayşe
What time are we demoing tomorrow?
10 AM Istanbul, same Zoom link as last week.

Reply Thread

chat7

Quoted message block inside a bubble, with the replying author and the reply text beneath.

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

Contact Card

chat8

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

AK
Ayşe Kaya09:42
Sure, sending the Figma link now3

Conversation Item

chat9

Inbox row with avatar, name, message preview, timestamp, and a primary unread count chip.

09:42Read

Seen Receipt

chat10

Timestamp pill with double-check icon that colors sky when the message is read.

09:44

Sticker

chat11

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

Q2 Planning Kickoff
Mon, Apr 28
10:00 – 11:30
6 going

Meeting Invite

chat12

Event invite bubble with title, date, time, attendee count, and Join / Maybe actions.

Ayşe joined the conversation

System Message

chat13

Muted centered pill with an icon, used for joins, role changes, and other neutral system events.

Yesterday

Date Separator

chat14

Thin horizontal rule with a muted date pill in the middle, used to break up chat days.

kickoff-brief.pdf
2.4 MB8 pages

File Attachment

chat15

Chat bubble with a file icon tile, filename, size and page count, and a download button.

JD
John DoeActive now

Online Avatar

chat16

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

Message Ayşe

Composer

chat17

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

3 unread

Unread Divider

chat18

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

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

Pinned Message

chat19

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

Missed callAyşe Kaya · 09:42

Missed Call

chat20

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

Reaction Picker

chat21

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

Thread Chip

chat22

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

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

Scheduled Message

chat23

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

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

Edited Message

chat24

Standard chat bubble with a subtle italic edited caption beneath.