1. Components
  2. Chat Bubbles

Components

Tailwind CSS Chat Bubbles

Ready-to-use Tailwind CSS Chat Bubble UI component. Perfect for organising conversations in chats, messaging apps, social media platforms, and more.

Example

Basic left and right sided chat bubble example.

  • How can we help?

    You can ask questions like:

    • What's Preline UI?
    • How many Starter Pages & Examples are there?
    • Is there a PRO version?

  • what's preline ui?

  • Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

    Here're some links to get started

One sided

one sided chat bubble.

  • How can we help?

    You can ask questions like:

    • What's Preline UI?
    • How many Starter Pages & Examples are there?
    • Is there a PRO version?

  • what's preline ui?

  • Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

    Here're some links to get started

With avatar

You can also add additional elements to the chat bubble, such as an avatar image.

  • Avatar

    How can we help?

    You can ask questions like:

    • What's Preline UI?
    • How many Starter Pages & Examples are there?
    • Is there a PRO version?

  • what's preline ui?

    AZ
  • Avatar

    Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

    Here're some links to get started

The following examples uses an avatar image and a message status.