---
title: Bubble
description: Displays conversational content with variants, alignment, grouping, reactions, and polymorphic content.
icon: message-circle
author:
  name: shadcn
  url: https://github.com/shadcn
sidebar:
  badge: New
---

<ComponentPreview name="bubble-demo" />

<PoweredBy packages={[
  { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/base/bubble' },
]} />

## Installation

```package-install
npx shadcn@latest add @redpanda/bubble
```

## Usage

`Bubble` owns the message surface. Put avatars, sender names, timestamps, and message-level actions in `Message`.

```tsx
import {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
} from "@/components/redpanda-ui/components/bubble"
```

```tsx
<Bubble align="end" variant="secondary">
  <BubbleContent>Deployment completed.</BubbleContent>
  <BubbleReactions>👍</BubbleReactions>
</Bubble>
```

## Anatomy

```text
BubbleGroup
└── Bubble
    ├── BubbleContent
    └── BubbleReactions
```

## Variants

`Bubble` supports `default`, `secondary`, `muted`, `tinted`, `outline`, `ghost`, and `destructive`. Use `align="end"` for the current sender. The `ghost` variant removes the frame and width cap for assistant text, markdown, and other rich content.

## Polymorphic content

`BubbleContent` preserves the Shadcn UI Base `render` API for link and button bubbles.

```tsx
<Bubble>
  <BubbleContent render={<button onClick={openDetails} type="button" />}>
    Open details
  </BubbleContent>
</Bubble>
```

Do not place another pressable inside a polymorphic button or link bubble.

## Credits

- Based on the [Shadcn UI Bubble](https://ui.shadcn.com/docs/components/base/bubble) component.