---
title: "Chat"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/vi/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.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học               | Kiểu            | Sự miêu tả                                    |
| --------------------- | --------------- | --------------------------------------------- |
| chat                  | Căn cứ          | Wrapper for a single chat message row         |
| chat-bubble           | Công cụ sửa đổi | Styled message bubble                         |
| chat-avatar           | Công cụ sửa đổi | Avatar displayed alongside the message        |
| chat-header           | Công cụ sửa đổi | Sender name or metadata above the bubble      |
| chat-footer           | Công cụ sửa đổi | Timestamp or status below the bubble          |
| chat-start            | Công cụ sửa đổi | Aligns bubble to the left (incoming message)  |
| chat-end              | Công cụ sửa đổi | Aligns bubble to the right (outgoing message) |
| chat-xs               | Kích cỡ         | Cực nhỏ                                       |
| chat-sm               | Kích cỡ         | Bé nhỏ                                        |
| chat-md               | Kích cỡ         | Trung bình (mặc định)                         |
| chat-lg               | Kích cỡ         | Lớn                                           |
| chat-xl               | Kích cỡ         | Cực lớn                                       |
| chat-bubble-primary   | Màu sắc         | Primary theme color bubble                    |
| chat-bubble-secondary | Màu sắc         | Secondary theme color bubble                  |
| chat-bubble-accent    | Màu sắc         | Accent theme color bubble                     |
| chat-bubble-neutral   | Màu sắc         | Neutral theme color bubble                    |
| chat-bubble-info      | Màu sắc         | Info semantic color bubble                    |
| chat-bubble-success   | Màu sắc         | Success semantic color bubble                 |
| chat-bubble-warning   | Màu sắc         | Warning semantic color bubble                 |
| chat-bubble-error     | Màu sắc         | Error semantic color bubble                   |

## Cách sử dụng cơ bản

## 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>
```