Shadcn Bubble Components

Shadcn Bubble Component

The Shadcn Bubble is a React chat bubble component for conversation interfaces. It handles the details every chat UI needs: incoming and outgoing alignment, grouped messages from the same sender, several visual styles and emoji reactions, so you can focus on the data instead of rebuilding message layouts.

Chat interfaces need more than a colored box, so these shadcn chat bubble variants include grouped messages, emoji reactions, avatars with read receipts, bubbles that act as links or buttons and a long message that expands with a Show more trigger. Everything is theme aware markup built with shadcn/ui, React and Tailwind CSS; only the asChild option uses the Slot utility from Radix UI.

What is the Shadcn Bubble Component?

A bubble wraps a single message. The outer Bubble sets the style and which side of the conversation the message sits on, and BubbleContent is the rounded surface that holds the text. Consecutive messages go into a BubbleGroup, and reactions are a small pill pinned to the top or bottom edge of the bubble. Bubbles grow with their content up to 80% of the row width, so long messages wrap cleanly.

A bubble is for content that is part of a back and forth conversation. For short system messages that appear and disappear, use a Sonner Toast. For persistent feedback on a page, use an Alert, and for standalone content blocks use a Card.

Anatomy of the Shadcn Bubble

7 Shadcn Bubble Variants

Each bubble variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic: A short conversation with muted incoming messages on the left and primary outgoing messages on the right.
• Variants: All seven styles side by side, from the strong default bubble to the unframed ghost and the destructive failed message.
• Grouped messages: Consecutive messages from each sender stacked in a BubbleGroup, so the conversation reads as turns.
• With reactions: Emoji reactions and a +3 counter pinned to the top or bottom edge, aligned to either side of the bubble.
• Link and button: Bubbles rendered as a link or a button with asChild, for shared links and tappable actions.
• With avatar: A grouped conversation with the sender avatar next to the last message and a read receipt under the reply.
• Collapsible message: A long outline bubble that shows a summary first and reveals the rest with a Collapsible Show more trigger inside the bubble.

How to Install the Shadcn Bubble Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a bubble variant by its name:

npx shadcn@latest add @shadcnuikit/bubble1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Bubble Component

Import the parts from components/ui/bubble. Use align="end" for messages from the current user and a lighter variant such as muted for everyone else.

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

export function Conversation() {
  return (
    <div className="flex flex-col gap-4">
      <BubbleGroup>
        <Bubble variant="muted">
          <BubbleContent>Did you see the release notes?</BubbleContent>
        </Bubble>
        <Bubble variant="muted">
          <BubbleContent>We should upgrade this week.</BubbleContent>
        </Bubble>
      </BubbleGroup>
      <Bubble align="end">
        <BubbleContent>Agreed, I will open a branch tomorrow.</BubbleContent>
        <BubbleReactions align="start" aria-label="Reaction: thumbs up" role="img">
          <span>👍</span>
        </BubbleReactions>
      </Bubble>
    </div>
  )
}

Why Use the Shadcn Bubble Component

• Chat layout solved: Alignment, maximum width, wrapping and grouping are built in, so messages look right on any screen.
• Seven ready styles: Pick a variant for the sender, the assistant, system notes or failed messages without writing new classes.
• Theme aware: Colors come from your CSS variables, and the tinted style is derived from your primary color in light and dark mode.
• Interactive when needed: Render a bubble as a real link or button with asChild and keep the focus ring and hover state.
• Stateless and lightweight: The bubble has no hooks or internal state, and the only dependency is the Radix Slot used by asChild, so it works in server components and any React setup.

Common Bubble Use Cases

• AI chat interfaces: Use the ghost variant for full width assistant replies and a strong bubble for the user prompt.
• Customer support widgets: Live chat panels with agent avatars, read receipts and quick reply buttons.
• Team messaging: Grouped messages and emoji reactions in collaboration and community apps.
• Comment threads: Short replies on tasks, documents or pull requests shown as a conversation.
• Onboarding flows: Guided, chat style onboarding where each step is a message with an action button.

Customizing the Shadcn Bubble

Every part accepts a className, merged with cn(). Change the corner radius or padding on BubbleContent, or target a style through the data-variant and data-align attributes on the wrapper. Because colors come from theme variables, a palette from the free Theme Generator changes every bubble at once.

For example, a tail-like corner on outgoing messages only needs one class:

<Bubble align="end">
  <BubbleContent className="rounded-br-md">
    On my way!
  </BubbleContent>
</Bubble>

Bubble Accessibility

Bubbles are regular div elements, so screen readers read messages in the order they appear. Wrap the conversation in a list or a role="log" region when new messages arrive live, and add the sender name as visually hidden text when the avatar is the only hint. Emoji reactions should have role="img" and a descriptive aria-label, as in the reactions example.

Interactive bubbles rendered with asChild are native links or buttons, so they are reachable with Tab and activated with Enter, and they show a visible focus ring.

Bubble Best Practices

• Keep the current user on one side and everyone else on the other; never mix alignments for the same sender.
• Group consecutive messages and show the avatar once per group instead of on every bubble.
• Use the destructive variant only for failed or rejected messages, and offer a retry action.
• Put timestamps and read receipts outside the bubble in small muted text.
• Render links and actions with asChild so they stay real a and button elements.
• Collapse very long messages with a Collapsible instead of letting them fill the screen.

Components Related to Bubble

Shadcn Bubble FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.