---
title: "Chat"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Chat Bubble with start/end alignment, avatars, timestamps, and status indicators. Build accessible messaging UIs without JavaScript."
url: https://frutjam.com/components/chat
---

# Chat Bubble Component

 Chat components display conversational messages in a readable, organized format. Built with semantic HTML and flexible layouts, chat bubbles represent both user and system messages. The Frutjam chat system supports multiple colors, alignments, and styles—ideal for messaging interfaces, customer support panels, and conversational UI.

| Class                 | Type     | Description                                   |
| --------------------- | -------- | --------------------------------------------- |
| chat                  | Base     | Wrapper for a single chat message row         |
| chat-bubble           | Modifier | Styled message bubble                         |
| chat-avatar           | Modifier | Avatar displayed alongside the message        |
| chat-header           | Modifier | Sender name or metadata above the bubble      |
| chat-footer           | Modifier | Timestamp or status below the bubble          |
| chat-start            | Modifier | Aligns bubble to the left (incoming message)  |
| chat-end              | Modifier | Aligns bubble to the right (outgoing message) |
| chat-xs               | Size     | Extra small                                   |
| chat-sm               | Size     | Small                                         |
| chat-md               | Size     | Medium (default)                              |
| chat-lg               | Size     | Large                                         |
| chat-xl               | Size     | Extra large                                   |
| chat-bubble-primary   | Color    | Primary theme color bubble                    |
| chat-bubble-secondary | Color    | Secondary theme color bubble                  |
| chat-bubble-accent    | Color    | Accent theme color bubble                     |
| chat-bubble-neutral   | Color    | Neutral theme color bubble                    |
| chat-bubble-info      | Color    | Info semantic color bubble                    |
| chat-bubble-success   | Color    | Success semantic color bubble                 |
| chat-bubble-warning   | Color    | Warning semantic color bubble                 |
| chat-bubble-error     | Color    | Error semantic color bubble                   |

## Basic Usage

## Chat with Avatar

```html
<div class="chat chat-start">
  <div class="chat-avatar avatar">
    <div class="w-10 rounded-full bg-primary"></div>
  </div>
  <div class="chat-bubble">Hello!</div>
</div>

<div class="chat chat-end">
  <div class="chat-avatar avatar">
    <div class="w-10 rounded-full bg-secondary"></div>
  </div>
  <div class="chat-bubble">Hi there!</div>
</div>
```


## Chat Sizes

```html
<div class="chat chat-start chat-sm">
  <div class="chat-bubble">Small message</div>
</div>

<div class="chat chat-start chat-md">
  <div class="chat-bubble">Medium message</div>
</div>

<div class="chat chat-start chat-lg">
  <div class="chat-bubble">Large message</div>
</div>
```


## Chat Styles

```html
<div class="chat chat-start">
  <div class="chat-bubble">Default style</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-primary">Primary message</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-secondary">Secondary message</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-accent">Accent message</div>
</div>
```


## Chat Header and Footer

```html
<div class="chat chat-start">
  <div class="chat-header">John</div>
  <div class="chat-bubble">Thanks! I'm looking forward to it.</div>
  <time class="text-xs opacity-50">12:45</time>
</div>

<div class="chat chat-end">
  <div class="chat-header">You</div>
  <div class="chat-bubble">I'll see you tomorrow!</div>
  <time class="text-xs opacity-50">12:46</time>
</div>
```


## Conversation Thread

```html
<div>
  <div class="chat chat-start">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-primary"></div>
    </div>
    <div class="chat-bubble">Hello! How can I help?</div>
  </div>

  <div class="chat chat-end">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-secondary"></div>
    </div>
    <div class="chat-bubble">I need help with my order</div>
  </div>

  <div class="chat chat-start">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-primary"></div>
    </div>
    <div class="chat-bubble">I'd be happy to assist you!</div>
  </div>
</div>
```