Components
Bubble
Bubble chat primitives.
Use Bubble to build chat message bubbles.
Hello there
Hi! How can I help?
import { BubbleGroup, Bubble, BubbleContent } from '@tile-ui/react';
export default function BubbleDemo() {
return (
<BubbleGroup>
<Bubble align="start">Registry install
pnpm dlx shadcn@latest add @tile-ui/bubblePackage usage
import { BubbleGroup, Bubble, BubbleContent } from '@tile-ui/react';
<BubbleGroup>
<Bubble align="start">
<BubbleContent>Hello</BubbleContent>
</Bubble>
</BubbleGroup>Highlights
- Seven variants
- Start and end alignment
- Reactions
Registry dependencies
| Item | Purpose |
|---|---|
bubble | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
Bubble
| Prop | Type | Default |
|---|---|---|
variant | 'default' | 'secondary' | 'muted' | 'tinted' | 'outline' | 'ghost' | 'destructive' | — |
align | 'start' | 'end' | — |
BubbleContent
| Prop | Type | Default |
|---|---|---|
asChild | boolean | — |
BubbleReactions
| Prop | Type | Default |
|---|---|---|
side | 'top' | 'bottom' | — |
align | 'start' | 'end' | — |