PatternAvailable

Bubble

Message bubbles with alignment and semantic color variants.

Can I customize these components?

Yes. The source belongs in your project.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/bubble.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import { BubbleGroup, Bubble, BubbleContent } from '@/components/ui/bubble';

export default function Demo() {
  return (
    <BubbleGroup className="w-full max-w-md">
      <Bubble>
        <BubbleContent>Can I customize these components?</BubbleContent>
      </Bubble>
      <Bubble align="end" variant="secondary">
        <BubbleContent>Yes. The source belongs in your project.</BubbleContent>
      </Bubble>
    </BubbleGroup>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

A surface or content, not a control by default. No artificial hover, pressed or focus state.
Internal actions use Button or links. Informational states need text as well as color.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
align	start / end	start	Message alignment.
variant	default / secondary / muted / tinted / outline / ghost / destructive	default	Bubble treatment.

Accessibility

Rules that should remain intact when adapting the component to a product.

Identify speakers in the surrounding conversation; alignment or color alone is not enough.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.