shadcn-preact
Components

Bubble

Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.

PreviewSource
Hey there! what's up?
Hey! Want to see chat bubbles?
I can group messages, switch sides, and keep the whole thread easy to scan.
Sure. Hit me with your best demo.
Yes. You are reading a demo that is demoing itself. Very meta. Very on-brand.

Installation

Complete the project setup first, including Tailwind CSS v4, theme tokens, and Preact compatibility aliases.

1. Install dependencies

bun add --exact class-variance-authority@0.7.1 cn@0.4.0 preact@11.0.0 tw-animate-css@1.4.0

2. Copy the component with degit

Run this from your project root. It selects bubble.tsx, its local dependencies, and both licenses directly from the repository, then copies them into src/components/ui.

bunx degit@3.10.0 https://github.com/LiasCode/shadcn-preact#main ./.cache/shadcn-preact/bubble --files LICENSE.md,registry/ui/bubble.tsx,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/internals/empty.ts,registry/ui/primitives/internals/getReactElementRef.ts,registry/ui/primitives/internals/getStateAttributesProps.ts,registry/ui/primitives/internals/mergeObjects.ts,registry/ui/primitives/internals/resolveClassName.ts,registry/ui/primitives/internals/resolveStyle.ts,registry/ui/primitives/internals/types.ts,registry/ui/primitives/internals/useMergedRefs.ts,registry/ui/primitives/internals/useRefWithInit.ts,registry/ui/primitives/internals/useRenderElement.ts,registry/ui/primitives/merge-props/index.ts,registry/ui/primitives/use-render/index.ts --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/bubble/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/bubble/LICENSE.md ./src/components/ui/LICENSE.md

The temporary copy lives in .cache/shadcn-preact/bubble. Existing components stay in place; shared source files are updated from main.

Selected source files (15)

Usage

import { Bubble, BubbleContent, BubbleReactions } from "./components/ui/bubble"
<Bubble>
  <BubbleContent>
    I checked the registry output and removed the stale route.
  </BubbleContent>
  <BubbleReactions>
    <span>👍</span>
  </BubbleReactions>
</Bubble>

Examples

Variants

Use variant to change the visual treatment of the bubble.

VariantsSource
Preview
Example requirements

Copy the example’s local helpers and preserve their relative imports: markdown.tsx.

Alignment

Use align on Bubble to align the bubble to the start or end of the conversation.

AlignmentSource
Preview

Bubble Group

Use BubbleGroup to group consecutive bubbles from the same sender. Note the align prop should be set on the Bubble component itself, not the BubbleGroup component.

Bubble GroupSource
Preview

Reactions

Use BubbleReactions for bubble reactions. You can use it to display reactions or quick action buttons. Use side and align to position the row — side="top" anchors it to the upper edge. Reactions overlap the bubble edge, so leave vertical space between rows — the examples below use a larger gap for this reason.

ReactionsSource
Preview
Example requirements

Also uses: Button.

bun add --exact sonner@2.0.8

Show More / Collapsible

Long bubble content can be composed with Collapsible to allow for a show more or show less interaction. Use the CollapsibleTrigger component to trigger the collapsible content.

Show More / CollapsibleSource
Preview
Example requirements

Also uses: Button, Collapsible.

bun add --exact lucide-preact@1.51.0

Tooltip

Wrap a bubble in a Tooltip to reveal metadata on hover, such as when a message was read.

TooltipSource
Preview
Example requirements

Also uses: Button, Tooltip.

bun add --exact lucide-preact@1.51.0

Popover

Pair a bubble with a Popover to surface more information on demand, such as the full error message for a failed action.

PopoverSource
Preview
Example requirements

Also uses: Button, Popover.

bun add --exact lucide-preact@1.51.0

Markdown

MarkdownSource
Preview
Example requirements

Copy the example’s local helpers and preserve their relative imports: markdown.tsx.

Reference

See the official Bubble documentation for composition patterns and API details. This page uses the Preact port and examples from the pinned upstream revision.

Component source