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

# Chat Bubble Component

Komponenty czatu wyświetlają wiadomości konwersacyjne w czytelnym, zorganizowanym formacie. Zbudowane w oparciu o semantyczny kod HTML i elastyczne układy, dymki czatu reprezentują zarówno wiadomości użytkownika, jak i systemowe. System czatu Frutjam obsługuje wiele kolorów, wyrównań i stylów — idealnie nadaje się do interfejsów przesyłania wiadomości, paneli obsługi klienta i konwersacyjnego interfejsu użytkownika.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa                 | Typ         | Opis                                                     |
| --------------------- | ----------- | -------------------------------------------------------- |
| chat                  | Opierać     | Opakowanie dla pojedynczego wiersza wiadomości czatu     |
| chat-bubble           | Modyfikator | Stylizowana bańka wiadomości                             |
| chat-avatar           | Modyfikator | Awatar wyświetlany obok wiadomości                       |
| chat-header           | Modyfikator | Nazwa nadawcy lub metadane nad dymkiem                   |
| chat-footer           | Modyfikator | Sygnatura czasowa lub stan pod dymkiem                   |
| chat-start            | Modyfikator | Wyrównuje dymek do lewej strony (wiadomość przychodząca) |
| chat-end              | Modyfikator | Wyrównuje dymek do prawej strony (wiadomość wychodząca)  |
| chat-xs               | Rozmiar     | Bardzo mały                                              |
| chat-sm               | Rozmiar     | Mały                                                     |
| chat-md               | Rozmiar     | Średni (domyślny)                                        |
| chat-lg               | Rozmiar     | Duży                                                     |
| chat-xl               | Rozmiar     | Bardzo duży                                              |
| chat-bubble-primary   | Kolor       | Podstawowy motyw kolorowej bańki                         |
| chat-bubble-secondary | Kolor       | Kolorowa bańka motywu drugorzędnego                      |
| chat-bubble-accent    | Kolor       | Bańka koloru motywu akcentującego                        |
| chat-bubble-neutral   | Kolor       | Neutralna bańka w kolorze motywu                         |
| chat-bubble-info      | Kolor       | Informacje semantyczna kolorowa bańka                    |
| chat-bubble-success   | Kolor       | Sukces semantyczna kolorowa bańka                        |
| chat-bubble-warning   | Kolor       | Ostrzeżenie semantyczna kolorowa bańka                   |
| chat-bubble-error     | Kolor       | Błąd semantycznej kolorowej bańki                        |

## Podstawowe użycie

## Czatuj z Avatarem

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

## Rozmiary czatu

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

## Style czatu

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

## Nagłówek i stopka czatu

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

## Temat rozmowy

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