# Bubble: Long content

> Unbroken strings, URLs, emoji and CJK text wrap inside the bubble instead of overflowing a narrow column.

Example: https://hextaui.com/docs/bubble/examples/long-content
Component docs: https://hextaui.com/docs/bubble.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/bubble-long-content.json
```

This adds `components/examples/bubble/long-content.tsx` with the Bubble component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/bubble/long-content.tsx"
import { Bubble, BubbleContent } from "@/components/ui/bubble"

export function BubbleLongContent() {
  return (
    <div className="flex w-72 max-w-full flex-col gap-3">
      <Bubble variant="secondary">
        <BubbleContent>
          Supercalifragilisticexpialidocious_unbroken_string_that_never_ends_1234567890
        </BubbleContent>
      </Bubble>
      <Bubble align="end">
        <BubbleContent>
          https://example.com/a/very/long/path/that/keeps/going/and/going?with=query&amp;params=true
        </BubbleContent>
      </Bubble>
      <Bubble variant="outline">
        <BubbleContent>
          👩‍👩‍👧‍👦👨🏽‍💻🏳️‍🌈 你好世界，这是一个很长的中文句子用于测试换行
        </BubbleContent>
      </Bubble>
      <Bubble variant="muted" align="end">
        <BubbleContent>k</BubbleContent>
      </Bubble>
      <Bubble variant="tinted">
        <BubbleContent> </BubbleContent>
      </Bubble>
    </div>
  )
}
```

## Props in this example

### Bubble

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "secondary" \| "muted" \| "tinted" \| "outline" \| "ghost" \| "destructive"` | `"default"` |  |
| `align` | `"start" \| "end"` | `"start"` |  |

## More Bubble examples

- [Variants](https://hextaui.com/docs/bubble/examples/variants.md)
- [Alignment](https://hextaui.com/docs/bubble/examples/alignment.md)
- [Group](https://hextaui.com/docs/bubble/examples/group.md)
- [Shapes](https://hextaui.com/docs/bubble/examples/shapes.md)
- [Tail](https://hextaui.com/docs/bubble/examples/tail.md)
- [Reactions](https://hextaui.com/docs/bubble/examples/reactions.md)
- [Show more](https://hextaui.com/docs/bubble/examples/show-more.md)
- [Tooltip](https://hextaui.com/docs/bubble/examples/tooltip.md)
- [Popover](https://hextaui.com/docs/bubble/examples/popover.md)
- [Nested reply](https://hextaui.com/docs/bubble/examples/nested.md)
- [Right to left](https://hextaui.com/docs/bubble/examples/rtl.md)