Bubble

Presents short conversational content in a message bubble.

This is a one line bubble.

This bubble has multiple lines. It should wrap to the next line and you should see a different radius on the corners.

This bubble has multiple lines.

It should wrap to the next line and you should see a different radius on the corners.

Here is some more text to see how it wraps.

Installation

Install Bubble from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/bubble

Usage

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

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
BubbleGroup	Groups related items into one logical set.
Bubble	A composable part of the component anatomy.
BubbleContent	Contains the primary visible content.
BubbleReactions	A composable part of the component anatomy.

API Reference

Bubble exports 4 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

BubbleGroup Component
Bubble Component
BubbleContent Component
BubbleReactions Component

Accessibility

Bubble adds no application-specific accessible name by itself; use semantic content and label any interactive descendants.
Do not communicate state or meaning through color alone, and verify the composed result at text zoom and with keyboard navigation.

Source

Bubble uses the standard shadcn API and is distributed through Oros. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Breadcrumb Button