# Bubble
> Chat message bubbles with variants, grouped corners, reactions and room for interactive content.
Docs: https://hextaui.com/docs/bubble
Markdown: https://hextaui.com/docs/bubble.md
```tsx title="components/examples/bubble/demo.tsx"
import {
Bubble,
BubbleContent,
BubbleGroup,
BubbleReactions,
} from "@/components/ui/bubble"
export function BubbleDemo() {
return (
I checked the registry output and removed the stale route.
๐Nice, thanks!Did the preview deploy pick it up?
Yes. The preview at build 1482 serves the new route, and the old one
now returns a 404 as expected.
Pushed the fix, can you take a look?Looks good. Merging after CI passes.Jamie joined the conversationPinned: release notes are in the doc.Here is the summary you asked for.
Ghost bubbles drop the frame so assistant replies can span the full
row and read like a document.
Message failed to send. Tap to retry.
)
}
```
### Alignment
`align="end"` pushes a bubble to the end of the row for the current userโs messages. It follows the reading direction.
```tsx title="components/examples/bubble/alignment.tsx"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
export function BubbleAlignment() {
return (
Aligned to the start.Aligned to the end.
)
}
```
### Group
Wrap consecutive messages from one sender in ``. Corners on the sender side tighten so the run reads as one block, and a lone bubble stays fully round.
```tsx title="components/examples/bubble/group.tsx"
import { Bubble, BubbleContent, BubbleGroup } from "@/components/ui/bubble"
export function BubbleGroupDemo() {
return (
Hey!Did the deploy land?
Asking because the dashboard still shows the old build number and I
want to confirm before I post the announcement.
It did.Hard refresh ๐A single bubble in a group stays round.
)
}
```
### Shapes
Set `shape` on a group to style all of its bubbles, or on a single bubble. `joined` is the default.
```tsx title="components/examples/bubble/shapes.tsx"
import { Bubble, BubbleContent, BubbleGroup } from "@/components/ui/bubble"
const shapes = [
{ shape: "uniform", description: "Every bubble fully round." },
{
shape: "joined",
description: "Grouped corners tighten on the sender side.",
},
{ shape: "tail", description: "The last bubble of a group gets a tail." },
] as const
export function BubbleShapes() {
return (
{shapes.map(({ shape, description }) => (
{shape}{" "}
{description}
Hey!Did the deploy land?It did.
Hard refresh and you should see build 1482 on the dashboard.
Perfect ๐
))}
)
}
```
### Tail
`shape="tail"` draws a tail on the last bubble of a run, matching the bubble color. Outline and ghost bubbles skip it.
```tsx title="components/examples/bubble/tail.tsx"
import {
Bubble,
BubbleContent,
BubbleGroup,
BubbleReactions,
} from "@/components/ui/bubble"
export function BubbleTail() {
return (
Pushed the fix, can you take a look?Looks good. Merging after CI passes.Jamie joined the conversationPinned: release notes are in the doc.Outline bubbles never get a tail.Message failed to send. Tap to retry.Reactions sit on the top corner.โค๏ธokOnly the last bubble in a groupgets the tail.
)
}
```
### Reactions
`` overlaps the bubble edge and reserves its own space, so the next row needs no extra gap. Give a static row `role="img"` and a label, or use buttons for interactive reactions.
```tsx title="components/examples/bubble/reactions.tsx"
"use client"
import * as React from "react"
import {
IconFlame,
IconHeart,
IconMoodSmile,
IconThumbUp,
} from "@tabler/icons-react"
import { Bubble, BubbleContent, BubbleReactions } from "@/components/ui/bubble"
import { Button } from "@/components/ui/button"
function ReactionToggle({
label,
icon,
initial = false,
}: {
label: string
icon: React.ReactNode
initial?: boolean
}) {
const [pressed, setPressed] = React.useState(initial)
return (
)
}
export function BubbleReactionsDemo() {
return (
Shipped the new onboarding flow.๐๐ฅ+8Reactions can anchor to the top.โค๏ธok๐๐๐โ Interactive reactions use buttons.} initial />
} />
} />
} />
)
}
```
### Show more
Render a `` as the bubble content to fold long messages. The bubble grows smoothly and the hidden text stays searchable.
```tsx title="components/examples/bubble/show-more.tsx"
import { IconChevronDown } from "@tabler/icons-react"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible"
export function BubbleShowMore() {
return (
}>
Here is the full incident timeline. The first alert fired at 09:12
when p95 latency crossed 800ms on the checkout service.
At 09:20 we rolled back the connection pool change. Latency
recovered by 09:24 and error rates returned to baseline by 09:31.
A follow-up will add a canary stage for pool configuration.
}
>
Show more
Show less
)
}
```
### Tooltip
Render a bubble as a tooltip trigger to show details like the read time. Add `tabIndex` so keyboard users can reach it.
```tsx title="components/examples/bubble/tooltip.tsx"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
export function BubbleTooltip() {
return (