Toggle Sidebar B
AppearanceLight & dark mode D

Bubble

The message surface. Seven tonal variants, start/end alignment, grouping, and absolutely-positioned reactions.

Default

A short exchange: a muted assistant bubble on the start side, a default user bubble on the end side, wrapped in a BubbleGroup.

Replay preview
Can you summarize today's standup?
Three things shipped, the search bug is fixed, and billing is blocked on the API review.

Variants

default uses the primary color for the active user; secondary is the neutral assistant surface; muted, tinted, outline, ghost, and destructive cover the rest.

Replay preview
default
secondary
muted
tinted
outline
ghost
destructive

Group

BubbleGroup stacks consecutive bubbles from one sender.

Replay preview
Grouped bubbles share a sender…
…and stack with a tight gap.
No avatar repeats in between.

Reactions

BubbleReactions floats over the bubble. Control placement with side and align.

Replay preview
Pinned to the bottom-end corner.
👍 3
Top-start reactions.
🎉 1

Alignment

align hints which side the bubble belongs to.

Replay preview
align="start" sits the bubble on the left.
align="end" sits it on the right.

Collapsible

Tuck extra detail — like an assistant's reasoning — inside a Collapsible so the bubble stays compact until expanded.

Replay preview

The invoice total is $1,240 after the annual discount.

Tooltip

Wrap a Bubble in a TooltipTrigger to surface metadata, such as a delivery timestamp, on hover.

Replay preview
Sounds good — see you at 3.

Popover

A Popover trigger inside the bubble opens richer, interactive content in a floating panel.

Replay preview
Your order ships tomorrow.

API Reference

Bubble

PropTypeDefaultDescription
variant"default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive""default"Tonal surface of the bubble.
align"start" | "end""start"Sets data-align for downstream styling.
classstringExtra classes, merged with cn().
SlotDescription
defaultBubbleContent and BubbleReactions.

BubbleContent

PropTypeDefaultDescription
asChildbooleanfalseMerge props onto the child via reka-ui Primitive.
classstringExtra classes, merged with cn().
SlotDescription
defaultMessage text or rich content.

BubbleReactions

PropTypeDefaultDescription
side"top" | "bottom""bottom"Vertical edge to attach to.
align"start" | "end""end"Horizontal alignment along that edge.
SlotDescription
defaultReaction chips.

BubbleGroup

SlotDescription
defaultConsecutive Bubble elements.