Bubble

Colored message surfaces for chat and conversation UIs, with optional reactions.

How can I help you today?

Summarize the design review notes.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/bubble.json

Usage

Use bubble for message text surfaces in chat threads. Pair with Message for full rows when you install the message component.

import {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
} from "@/components/bubble/bubble";

export function Example() {
  return (
    <BubbleGroup>
      <Bubble variant="muted" align="start">
        <BubbleContent>How can I help you today?</BubbleContent>
      </Bubble>
      <Bubble variant="default" align="end">
        <BubbleContent>Summarize the design review notes.</BubbleContent>
        <BubbleReactions side="bottom" align="end">
          <span className="px-1.5 text-xs">👍 2</span>
        </BubbleReactions>
      </Bubble>
    </BubbleGroup>
  );
}

Variants: default, secondary, muted, tinted, outline, ghost, destructive. Align with align (start | end). Position reactions via BubbleReactions side and align.