---
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/fr/components/chat
---

# Chat Bubble Component

Les composants de discussion affichent les messages conversationnels dans un format lisible et organisé. Construites avec du HTML sémantique et des mises en page flexibles, les bulles de discussion représentent à la fois les messages de l'utilisateur et du système. Le système de discussion Frutjam prend en charge plusieurs couleurs, alignements et styles, ce qui est idéal pour les interfaces de messagerie, les panneaux de support client et l'interface utilisateur conversationnelle.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

| Classe                | Taper        | Description                                              |
| --------------------- | ------------ | -------------------------------------------------------- |
| chat                  | Base         | Wrapper pour une seule ligne de message de discussion    |
| chat-bubble           | Modificateur | Bulle de message stylisée                                |
| chat-avatar           | Modificateur | Avatar affiché à côté du message                         |
| chat-header           | Modificateur | Nom de l'expéditeur ou métadonnées au-dessus de la bulle |
| chat-footer           | Modificateur | Horodatage ou statut sous la bulle                       |
| chat-start            | Modificateur | Aligne la bulle à gauche (message entrant)               |
| chat-end              | Modificateur | Aligne la bulle à droite (message sortant)               |
| chat-xs               | Taille       | Très petit                                               |
| chat-sm               | Taille       | Petit                                                    |
| chat-md               | Taille       | Moyen (par défaut)                                       |
| chat-lg               | Taille       | Grand                                                    |
| chat-xl               | Taille       | Très grand                                               |
| chat-bubble-primary   | Couleur      | Bulle de couleur du thème principal                      |
| chat-bubble-secondary | Couleur      | Bulle de couleur du thème secondaire                     |
| chat-bubble-accent    | Couleur      | Bulle de couleur du thème d'accentuation                 |
| chat-bubble-neutral   | Couleur      | Bulle de couleur thème neutre                            |
| chat-bubble-info      | Couleur      | Bulle de couleur sémantique d'information                |
| chat-bubble-success   | Couleur      | Bulle de couleur sémantique de succès                    |
| chat-bubble-warning   | Couleur      | Bulle de couleur sémantique d'avertissement              |
| chat-bubble-error     | Couleur      | Bulle de couleur sémantique d'erreur                     |

## Utilisation de base

## Discutez avec un 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>
```

## Tailles des discussions

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

## Styles de discussion

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

## En-tête et pied de page du chat

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

## Fil de conversation

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