Reaction Bubble

Shipped the v2 onboarding this morning ๐Ÿš€
421
About this piece

Reaction Bubble

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

Usage

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

import { Chat5 } from "@/components/beste/piece/chat5";

<Chat5
  message="Shipped the v2 onboarding this morning ๐Ÿš€"
  reactions={[
    {
      "emoji": "๐Ÿ”ฅ",
      "count": 4,
      "mine": true
    },
    {
      "emoji": "๐ŸŽ‰",
      "count": 2
    },
    {
      "emoji": "โค๏ธ",
      "count": 1
    }
  ]}
  role="received"
/>

More Chat pieces

View all Chat
Replying to AyลŸe
What time are we demoing tomorrow?
10 AM Istanbul, same Zoom link as last week.

Reply Thread

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

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.

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.

SB

Typing Indicator

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

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

Poll Message

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