Chat bubble

Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc.

Class name
Type
chatComponent Container for one line of conversation and all its data
chat-start
Modifier
Aligns `chat` to left (required)
chat-end
Modifier
Aligns `chat` to end (required)
chat-imageComponent For the author image
chat-headerComponent For the line above the chat bubble
chat-footerComponent For the line below the chat bubble
chat-bubbleComponent For the content of chat
chat-bubble-primary
Modifier
sets `primary` color for the `chat-bubble`
chat-bubble-secondary
Modifier
sets `secondary` color for the `chat-bubble`
chat-bubble-accent
Modifier
sets `accent` color for the `chat-bubble`
chat-bubble-info
Modifier
sets `info` color for the `chat-bubble`
chat-bubble-success
Modifier
sets `success` color for the `chat-bubble`
chat-bubble-warning
Modifier
sets `warning` color for the `chat-bubble`
chat-bubble-error
Modifier
sets `error` color for the `chat-bubble`
# chat-start and chat-end
It's over Anakin,
I have the high ground.
You underestimate my power!
# Chat with image
Tailwind CSS chat bubble component
It was said that you would, destroy the Sith, not join them.
Tailwind CSS chat bubble component
It was you who would bring balance to the Force
Tailwind CSS chat bubble component
Not leave it in Darkness
# Chat Bubble with colors
What kind of nonsense is this
Put me on the Council and not make me a Master!??
That's never been done in the history of the Jedi. It's insulting!
Calm down, Anakin.
You have been given a great honor.
To be on the Council at your age.
It's never happened before.
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details