Bubble

Displays conversational content with variants, alignment, grouping, reactions, and polymorphic content.

Powered by

Shadcn UI

Installation

npx shadcn@latest add @redpanda/bubble

pnpm dlx shadcn@latest add @redpanda/bubble

yarn dlx shadcn@latest add @redpanda/bubble

bunx shadcn@latest add @redpanda/bubble

nubx shadcn@latest add @redpanda/bubble

aube dlx shadcn@latest add @redpanda/bubble

Usage

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

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

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

Anatomy

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.

<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 component.