Bubble

A chat message bubble for conversational interfaces.

$bunx shadcn@latest add @nx-ui/bubble
Registry item
Installs withutils

Sent & received

Wrap bubbles in a BubbleGroup; align='end' pushes a bubble to the right for the current user's own messages.

Soil test results are back for the Elmridge allotment plot — pH looks good.
Brilliant, thanks Priya. Can you upload the report to the project folder?
Just sent it over now 🌱

Variants

Seven background treatments, from solid to borderless.

Default
Secondary
Muted
Tinted
Outline
Ghost
Destructive

Delivery status & reactions

Pair a bubble with a timestamp/read-receipt row and an absolutely positioned BubbleReactions chip.

Compost delivery for the Thornbury site is confirmed for Thursday.
09:41
👍 2
Perfect, I'll let the crew know.
09:42

Interactive content

BubbleContent renders any element via `render` — here a button reacts and a ghost bubble hosts a plain action row.

Quick reactions

Conversation composition

Avatars, grouped bubbles and a composer combined into a realistic project thread.

PN
Morning! The Riverside Grove volunteers are asking whether we can move Saturday's planting to the afternoon.
Forecast has rain clearing by 1pm.
Works for me — I'll update the sign-up sheet and notify everyone on the movement list.
09:47
You
PN
Amazing, thank you! 🌳
👍 3

API reference

Exported parts and their props, extracted from the component source.