Bubble

Chat message bubbles with variants and reactions.

shadcn/uinew-york-v4 · synced Aug 29, 2026

Installation

import { Bubble, BubbleContent, BubbleReactions, BubbleGroup } from "@aspyn-io/kit";

Align start for incoming messages and end for the current user; group consecutive bubbles.

Hey! Want to see chat bubbles?

Sure — hit me with your best demo.

It groups messages, switches sides, and stays easy to scan.

default

secondary

muted

tinted

outline

destructive

Ghost bubbles are unframed — great for assistant text and markdown.

BubbleReactions anchors an emoji/quick-action row to the bubble edge.

Tests passed on the first try. All 142 of them.

🎉👏

Bubble is just the message surface. For full chat rows with avatars, names, and timestamps, wrap bubbles in Message.
Make a bubble interactive by passing asChild/render to BubbleContent (renders a button or anchor) — the accessible name comes from the bubble text.
Reactions are decorative emoji: give BubbleReactions role="img" + aria-label so a screen reader announces the row once.