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.

SB

Typing Indicator

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

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.

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.