Bubble

Displays conversational content in a message bubble.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-8">

The Bubble component displays framed conversational content. Use it for chat text, short structured output, suggestions, and reactions. For full message rows with avatars or metadata, compose it inside Message.

Installation#

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Bubble
Copy

Usage#

Copy<Bubble variant=Muted>
  <Bubble.Content>
    {"I checked the registry output and removed the stale route."->React.string}
  </Bubble.Content>
  <Bubble.Reactions>
    <span> {"+1"->React.string} </span>
  </Bubble.Reactions>
</Bubble>

Composition#

CopyBubble
├── Bubble.Content
└── Bubble.Reactions

Use Bubble.Group to group consecutive bubbles from the same sender.

Features#

• Seven visual variants, from strong primary content to unframed ghost content
• Start and end alignment for sender and receiver bubbles
• Reactions that anchor to the bubble edge
• Bubbles size to their content, up to the style-defined max width
• Custom styling through className on every part

Examples#

Variants#

Use variant to change the visual treatment of the bubble.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-5">

Group#

Use Bubble.Group to stack consecutive bubbles from the same sender.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-8">

Reactions#

Use Bubble.Reactions for reaction summaries or quick action buttons.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-12">

Accessibility#

When reactions are plain emoji, group them with role="img" and an ariaLabel so assistive technology announces the reaction summary once. When reactions are interactive, render buttons with icon labels.

API Reference#

Bubble#

Bubble.Reactions#