Chat
Chat is used to display conversation bubbles in a messaging UI.
Installation
npx jsx-daisyui add chatDefault
chat-default
Obi-Wan Kenobi
You were the Chosen One!
Anakin
I hate you!
Colors
chat-colors
Primary bubble
Secondary bubble
Accent bubble
Info bubble
Success bubble
Warning bubble
Error bubble
With avatar
chat-with-avatar
Alice
Hey! How are you doing?
Bob
I'm doing great, thanks for asking!
Props
Chat.Root
| Prop | Type | Default | Description |
|---|---|---|---|
placement | 'start' | 'end' | 'start' | Alignment of the chat bubble (left or right). |
Chat.Bubble
| Prop | Type | Default | Description |
|---|---|---|---|
color | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | - | Color variant of the bubble. |
Chat.Image
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | Image source URL. |
alt | string | - | Alternative text for the image. |
Chat.Header
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Sender's name displayed above the bubble. |
time | string | - | Timestamp displayed next to the name. |