1. Components
  2. Chat Bubbles

Components

Tailwind CSS Chat Bubbles

A graphical representation of text messages, typically used in messaging apps, chat rooms, and other online communication platforms.

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.

  • Image Description

    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
  • Image Description

    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.