Faber UI
Components

Bubble

A chat-style message bubble with variants and alignment.

Bubble is a chat-style message bubble. It supports multiple variants and alignment, with optional reactions for quick emoji responses.

Installation

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/bubble.json

Usage

typescript
import {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
} from "@/components/ui/bubble";
import { RiThumbUpLine } from "@remixicon/react";

export default function Example() {
  return (
    <BubbleGroup>
      <Bubble>
        <BubbleContent>Hello, how are you?</BubbleContent>
        <BubbleReactions>
          <RiThumbUpLine />
        </BubbleReactions>
      </Bubble>
    </BubbleGroup>
  );
}

Examples

Default

Hello, how are you?
I am good, thanks!

Variants

Default
Secondary
Outline
Ghost
Muted
Tinted
Destructive

With reactions

Check out this message.

API

Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.

PartBuilt onProps
BubbleGroupdata-slot="bubble-group"<div>HTML—
Bubbledata-slot="bubble"<div>HTML
  • variant? = "default""default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive"
  • align? = "start""start" | "end"
BubbleContentdata-slot="bubble-content"<div>HTML—
BubbleReactionsdata-slot="bubble-reactions"<div>HTML
  • align? = "end""start" | "end"
  • side? = "bottom""top" | "bottom"

Changelog

  1. v0.1.0Accessibility, correctness, and token fixes across the kit, from a full code-smell audit.minor
Full Bubble history

Last updated on

On this page