Bubble

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

Loading component...

Installation

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.

Recent changes

patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested baseline while caret semantics still allow any compatible release within the same major.#133
minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109

See full history →