Bubble
What was said, in a square-cornered box with the one corner nearest the speaker cut off at 45\u00b0.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/bubbleExamples
Six kinds
import { Bubble, BubbleContent, BubbleGroup, BubbleReactions,} from "@/components/zero/bubble";export default function BubbleVariants() { return ( <BubbleGroup className="w-full max-w-md gap-4"> <Bubble> <BubbleContent>Take the canal, it is faster tonight.</BubbleContent> </Bubble> <Bubble variant="secondary" align="end"> <BubbleContent>On it. Eighteen minutes.</BubbleContent> <BubbleReactions>👍 2</BubbleReactions> </Bubble> <Bubble variant="muted"> <BubbleContent>Dispatcher is away until 22:00.</BubbleContent> </Bubble> <Bubble variant="outline"> <BubbleContent render={<button type="button" />}> Send me the route </BubbleContent> </Bubble> <Bubble variant="danger"> <BubbleContent>Couldn't reach the north gate.</BubbleContent> </Bubble> </BubbleGroup> );}Behaviour
The accent for your own turns, the raised grey for the other side, the surface for the quieter, an outlined black well, red for something that went wrong, or no box at all. Inside a Message it follows the message's side.
BubbleContent takes render, so a bubble can be a button or a link, a suggested reply. BubbleReactions pins a small slab of reactions to its edge.
Props
Bubble
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "muted" | "outline" | "danger" | "ghost" | "default" | Its fill. |
| align | "start" | "end" | "start" | Which side it sits on, outside a Message. |
BubbleReactions
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "bottom" | "bottom" | Which edge it sits on. |
| align | "start" | "end" | "end" | Which end of that edge. |