Carregando…Carregando…Carregando…Carregando…Chat message surface — 7 intents, start/end alignment, reactions and grouping.
$ npx kikitocn add bubble@/lib/utils@radix-ui/react-slotimport { Bubble } from "@/components/ui/cn/bubble/Bubble";
export function BubbleExample() {
return (
<Bubble variant="default" align="start">
Bubble
</Bubble>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | 'default' | 'secondary' | 'muted' | 'tinted' | 'outline' | 'ghost' | 'destructive' | 'default' | Cor/intent da bolha |
align | 'start' | 'end' | 'start' | Lado da conversa (esquerda/direita) |
children* | React.ReactNode | — | Conteúdo da mensagem (usar <BubbleContent>) |
className | string | — | Classes CSS extras |
style | React.CSSProperties | — | Estilos inline extras |
7 intents
start · end — reactions sobrepondo a borda da bolha