# Bubble: Tail

> `shape="tail"` draws a tail on the last bubble of a run, matching the bubble color. Outline and ghost bubbles skip it.

Example: https://hextaui.com/docs/bubble/examples/tail
Component docs: https://hextaui.com/docs/bubble.md

## Add this example

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

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

## Source

```tsx title="components/examples/bubble/tail.tsx"
import {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
} from "@/components/ui/bubble"

export function BubbleTail() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Bubble shape="tail">
        <BubbleContent>Pushed the fix, can you take a look?</BubbleContent>
      </Bubble>
      <Bubble shape="tail" variant="secondary" align="end">
        <BubbleContent>Looks good. Merging after CI passes.</BubbleContent>
      </Bubble>
      <Bubble shape="tail" variant="muted">
        <BubbleContent>Jamie joined the conversation</BubbleContent>
      </Bubble>
      <Bubble shape="tail" variant="tinted" align="end">
        <BubbleContent>Pinned: release notes are in the doc.</BubbleContent>
      </Bubble>
      <Bubble shape="tail" variant="outline">
        <BubbleContent>Outline bubbles never get a tail.</BubbleContent>
      </Bubble>
      <Bubble shape="tail" variant="destructive" align="end">
        <BubbleContent>Message failed to send. Tap to retry.</BubbleContent>
      </Bubble>
      <Bubble shape="tail" align="end">
        <BubbleContent>Reactions sit on the top corner.</BubbleContent>
        <BubbleReactions side="top" align="start" role="img" aria-label="Heart">
          <span>❤️</span>
        </BubbleReactions>
      </Bubble>
      <Bubble shape="tail" variant="secondary">
        <BubbleContent>ok</BubbleContent>
      </Bubble>
      <BubbleGroup shape="tail">
        <Bubble variant="secondary">
          <BubbleContent>Only the last bubble in a group</BubbleContent>
        </Bubble>
        <Bubble variant="secondary">
          <BubbleContent>gets the tail.</BubbleContent>
        </Bubble>
      </BubbleGroup>
    </div>
  )
}
```

## Props in this example

### Bubble

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "secondary" \| "muted" \| "tinted" \| "outline" \| "ghost" \| "destructive"` | `"default"` |  |
| `align` | `"start" \| "end"` | `"start"` |  |
| `shape` | `"uniform" \| "joined" \| "tail"` | `"joined"` | Inherited from BubbleGroup when not set. |

### BubbleGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shape` | `"uniform" \| "joined" \| "tail"` | – | Applies to every bubble inside the group. |

### BubbleReactions

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `"top" \| "bottom"` | `"bottom"` |  |
| `align` | `"start" \| "end"` | `"end"` |  |

## 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)
- [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)
- [Long content](https://hextaui.com/docs/bubble/examples/long-content.md)
- [Nested reply](https://hextaui.com/docs/bubble/examples/nested.md)
- [Right to left](https://hextaui.com/docs/bubble/examples/rtl.md)