Bubble
A chat message bubble with variants, reactions, and start/end alignment. Pair it with Message for a full chat row.
Last updated January 1, 1980
Copied from shadcn/ui.
- Replaced physical left-3/right-3 with logical start-3/end-3 on BubbleReactions align variants
- Replaced [button]:text-left with [button]:text-start on BubbleContent
- Replaced bg-muted with bg-popover on BubbleReactions — this repo's --muted token is a 4% translucent overlay, which left the reaction pill nearly invisible
Overview
Installation
Usage
import { Bubble, BubbleContent, BubbleGroup } from "@/components/ui/bubble"
export function Example() {
return (
<BubbleGroup>
<Bubble align="start" variant="muted">
<BubbleContent>Hey, do you have a minute?</BubbleContent>
</Bubble>
<Bubble align="end">
<BubbleContent>Sure, what's up?</BubbleContent>
</Bubble>
</BubbleGroup>
)
}Examples
Variants
Alignment
Use align on Bubble to align the bubble to the start or end of the conversation.
Bubble Group
Use BubbleGroup to group consecutive bubbles from the same sender. Set align on each Bubble, not on the group.
Links and Buttons
Turn a bubble into a link or button with the render prop on BubbleContent.
Reactions
Use BubbleReactions for reactions or quick action buttons. Use side and align to position the row.
Show More / Collapsible
Long bubble content can be composed with Collapsible for a show more / show less interaction.
Tooltip
Wrap a reaction in Tooltip to reveal metadata on hover, such as a read receipt.
Popover
Pair a bubble with a Popover to surface more information on demand, such as a full error message.
RTL
align="end" correctly sits on the visual left under RTL, and reactions mirror along with it, so a chat thread reads naturally either way.