Open-source chat bubble components built with Tailwind CSS
Tags: tailwindcss, opensource, flowbite, css
Published: 2023-12-08 11:41:36

Hey developers!

In this article I will show you a collection of [chat bubble components built with Tailwind CSS](https://flowbite.com/docs/components/chat-bubble/) and the Flowbite UI library. Both technologies are open-source and you'll learn how to set everything up to make the components work.

## Tailwind CSS Chat Bubble

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](https://flowbite.com/docs/getting-started/quickstart/) to enable the dropdowns and tooltips functionality.

All of the components below are responsive, support dark mode and even have the logical properties to fully support RTL mode for right-to-left reading countries.

Without further ado, let's check out the components!

### Default chat bubble

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

[![Tailwind CSS Chat Bubble](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjwnmyohy676wu03pgvi.png)](https://flowbite.com/docs/components/chat-bubble/#default-chat-bubble)

- [View source code and example](https://flowbite.com/docs/components/chat-bubble/#default-chat-bubble)

### Voice note message

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

[![Tailwind CSS Voice Note](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmtfxa222v6g522rz4jf.png)](https://flowbite.com/docs/components/chat-bubble/#voice-note-message)

- [View source code and example](https://flowbite.com/docs/components/chat-bubble/#voice-note-message)

### File attachment

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

[![Tailwind CSS File Attachment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6osbr40gwyidogvi9anr.png)](https://flowbite.com/docs/components/chat-bubble/#file-attachment)

- [View source code and example](https://flowbite.com/docs/components/chat-bubble/#file-attachment)

### Image attachment

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

[![Tailwind CSS Image attachment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0jjmuz6gv5530n75y30.png)](https://flowbite.com/docs/components/chat-bubble/#image-attachment)

- [View source code and example](https://flowbite.com/docs/components/chat-bubble/#image-attachment)

### Image gallery

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

[![Tailwind CSS Image Gallery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5un8qlnd4mpbj0ge7sr.png)](https://flowbite.com/docs/components/chat-bubble/#image-gallery)

- [View source code and example](https://flowbite.com/docs/components/chat-bubble/#image-gallery)

### URL preview sharing

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

[![Tailwind CSS URL preview sharing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tahlu811b1x0lm97y4xr.png)
](https://flowbite.com/docs/components/chat-bubble/#url-preview-sharing)

- [View source code and example](https://flowbite.com/docs/components/chat-bubble/#url-preview-sharing)

If you'd like to find even more styles and variations of these chat bubble components then you can go ahead and check out the [Flowbite documentation](https://flowbite.com/docs/components/chat-bubble/).

## Credits

These resources couldn't have been made without the following open-source resources:

- [Tailwind CSS](https://tailwindcss.com/)
- [Flowbite](https://flowbite.com/)
- [Flowbite Icons](https://flowbite.com/icons/)