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
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/bubble.jsonUsage
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
Variants
With reactions
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.
| Part | Built on | Props |
|---|---|---|
BubbleGroupdata-slot="bubble-group" | <div>HTML | — |
Bubbledata-slot="bubble" | <div>HTML |
|
BubbleContentdata-slot="bubble-content" | <div>HTML | — |
BubbleReactionsdata-slot="bubble-reactions" | <div>HTML |
|
Changelog
- v0.1.0Accessibility, correctness, and token fixes across the kit, from a full code-smell audit.minor
Last updated on