Bubble

A chat bubble — contained message content with variants, alignment, and reactions.

Did you see the new studio panel?

The drill-in animation is so smooth.

Shipping it this week 🚀

<div className="flex w-full max-w-sm flex-col gap-2">
  <BubbleGroup>
    <Bubble variant="muted">
      <BubbleContent>Did you see the new studio panel?</BubbleContent>
    </Bubble>
    <Bubble variant="muted">
      <BubbleContent>The drill-in animation is so smooth.</BubbleContent>
    </Bubble>
  </BubbleGroup>
  <Bubble align="end">
    <BubbleContent>Shipping it this week 🚀</BubbleContent>
  </Bubble>
</div>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/bubble

Usage

import { Bubble, BubbleContent } from "@/ui/bubble"

<Bubble align="end">
  <BubbleContent>Shipping it this week 🚀</BubbleContent>
</Bubble>

Anatomy

Bubble positions one message on a side of the conversation and styles the BubbleContent inside it — variant picks the surface (primary, neutral, muted, tinted, outline, ghost or danger), align picks the side. Consecutive bubbles from the same sender stack inside a BubbleGroup, and BubbleReactions pins emoji reactions to a corner of the bubble.

import {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
} from "@/ui/bubble"

<BubbleGroup>
  <Bubble variant="muted">
    <BubbleContent>We just passed 10k stars!</BubbleContent>
    <BubbleReactions>🎉 3</BubbleReactions>
  </Bubble>
</BubbleGroup>

Examples

Variants

This is the primary bubble.

This is the neutral bubble.

This is the muted bubble.

This is the tinted bubble.

This is the outline bubble.

This is the ghost bubble.

This is the danger bubble.

Reactions

We just passed 10k stars!

🎉 3

Huge. Congrats team!

❤️ 2

API Reference

BubbleGroup

A group of consecutive bubbles from the same sender, stacked with a tight gap.

Supports all div attributes.

Prop	Type	Default

Bubble

A chat bubble — positions its content, reactions and metadata on one side of the conversation.

Supports all div attributes.

Prop	Type	Default
	`union`	`'primary'`

BubbleContent

The bubble's body — the contained surface the variant styles.

Supports all div attributes.

Prop	Type	Default

BubbleReactions

Emoji reactions pinned to a corner of the bubble.

Supports all div attributes.

Prop	Type	Default
	`"bottom" \| "top"`	`'bottom'`

Last updated on 8/31/2026