chat-bubble.md

layout	title	description	group	toc	requires_js	previous	previousLink	next	nextLink
home	Tailwind CSS Chat Bubble - Flowbite	Use the chat bubble component to show chat messages in your web application including voice notes, images, galleries and other attachments based on multiple styles and variations	components	true	true	Carousel	components/carousel/	Clipboard	components/clipboard/

The chat bubble component is the building block for creating chat interfaces where users can send messages to each other by text, voice notes, images, galleries and other attachments. These components are usually used in chat applications and social media platforms such as Facebook, Twitter/X, WhatsApp, and more.

The examples below provide multiple variations of default, outline, and clean styles coded with the utility classes from Tailwind CSS. Some of the components may require you to include the Flowbite JavaScript to enable the dropdowns and tooltips functionality.

Default chat bubble

Use this example to show a simple chat bubble with a text message, user profile and a timestamp.

{{< example id="chat-bubble-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}

Bonnie Green 11:46

That's awesome. I think our users will really appreciate the improvements.

Delivered

• Reply
• Forward
• Copy
• Report
• Delete

{{< /example >}}

Voice note message

This example can be used to show a voice note message with control buttons and a dropdown menu.

{{< example id="voice-note-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}

Bonnie Green 11:46

3:42

Delivered

• Reply
• Forward
• Copy
• Report
• Delete

{{< /example >}}

File attachment

Use this example to send a file attachment inside a chat bubble with the ability to download the file.

{{< example id="file-attachement-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}

Bonnie Green 11:46

Flowbite Terms & Conditions 12 Pages 18 MB PDF

Delivered

• Reply
• Forward
• Copy
• Report
• Delete

{{< /example >}}

Image attachment

This example can be used to show an image attachment with a download button when hovering over.

{{< example id="image-attachment-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="480" >}}

Bonnie Green 11:46

This is the new office <3

Download image

Delivered

• Reply
• Forward
• Copy
• Report
• Delete

{{< /example >}}

Image gallery

Use this example to show an image gallery based on a grid layout with the ability to download images.

{{< example id="image-gallery-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="480" >}}

Bonnie Green 11:46

This is the new office <3

Download image

Download image

Download image

+7

Download image

Delivered Save all

• Reply
• Forward
• Copy
• Report
• Delete

{{< /example >}}

URL preview sharing

Use this example to show a OG preview of the URL that is being shared inside the chat bubble.

{{< example id="url-sharing-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="520" >}}

Bonnie Green 11:46

Check out this open-source UI component library based on Tailwind CSS:

https://github.com/themesberg/flowbite

GitHub - themesberg/flowbite: The most popular and open source libra ... github.com Delivered

• Reply
• Forward
• Copy
• Report
• Delete

{{< /example >}}

Outline chat bubble

Use this example to show a text message with the user profile and timestamp outside the chat bubble.

{{< example id="outline-chat-bubble-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="370" >}}

Bonnie Green 11:46

That's awesome. I think our users will really appreciate the improvements.

Delivered

• Reply
• Forward
• Copy
• Report
• Delete

{{< /example >}}

Outline voice note

This example can be used to show a voice note with the user profile and timestamp outside the chat bubble.

{{< example id="outline-voice-note-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="370" >}}

Bonnie Green 11:46

3:42

Delivered

• Reply
• Forward
• Copy
• Report
• Delete

{{< /example >}}

Outline file attachment

Use this example to show a file attachment with the user profile and timestamp outside the chat bubble.

{{< example id="outline-file-attachment-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}

Bonnie Green 11:46

Flowbite Terms & Conditions 12 Pages 18 MB PDF

Delivered

• Reply
• Forward
• Copy
• Report
• Delete

{{< /example >}}

Outline image attachment

This example can be used to send an image attachment with the user profile outside the chat bubble.

{{< example id="outline-image-attachment-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="460" >}}

Bonnie Green 11:46

I'm working from home today! 😅

Download image

Delivered

• Reply
• Forward
• Copy
• Report
• Delete

{{< /example >}}

Outline image gallery

Use this example to show an image gallery with the user profile and timestamp outside the chat bubble.

{{< example id="outline-image-gallery-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="480" >}}

Bonnie Green 11:46

I'm working from home today! 😅

Download image

Download image

Download image

+7

Download image

Save all

Delivered

• Reply
• Forward
• Copy
• Report
• Delete

{{< /example >}}

Outline URL preview sharing

Use this example to show a URL preview with the user profile and timestamp outside the chat bubble.

{{< example id="outline-url-sharing-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="520" >}}

Bonnie Green 11:46

Check out this open-source UI component library based on Tailwind CSS:

https://github.com/themesberg/flowbite

GitHub - themesberg/flowbite: The most popular and open source libra ... github.com

Delivered

• Reply
• Forward
• Copy
• Report
• Delete

{{< /example >}}

Clean chat bubble

Use this example to show a text message with the user profile and timestamp with a transparent background.

{{< example id="clean-chat-bubble-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="180" >}}

Bonnie Green 11:46

That's awesome. I think our users will really appreciate the improvements.

Delivered

{{< /example >}}

Clean voice note

This example can be used to show a voice note with a transparent background.

{{< example id="clean-voice-note-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="180" >}}

Bonnie Green 11:46

3:42

Delivered

{{< /example >}}

Clean file attachment

Use this example to show a file attachment and a download button with a transparent background.

{{< example id="clean-file-attachment-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="200" >}}

Bonnie Green 11:46

Flowbite Terms & Conditions 12 Pages 18 MB PDF

Delivered

{{< /example >}}

Clean image attachment

This example can be used to show an image and a download button with a transparent background.

{{< example id="clean-image-attachment-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}

Bonnie Green 11:46

This is the new office <3

Download image

Delivered

{{< /example >}}

Clean image gallery

Use this example to show an image gallery with a transparent background as a chat message.

{{< example id="clean-image-gallery-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="390" >}}

Bonnie Green 11:46

This is the new office <3

Download image

Download image

Download image

+7

Download image

Delivered Save all

{{< /example >}}

Clean URL preview sharing

This example can be used to show a URL preview with a transparent background.

{{< example id="clean-url-sharing-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="450" >}}

Bonnie Green 11:46

Check out this open-source UI component library based on Tailwind CSS:

https://github.com/themesberg/flowbite

GitHub - themesberg/flowbite: The most popular and open source libra ... github.com Delivered

{{< /example >}}