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

# Chat Bubble Component

Sohbet bileşenleri, konuşma mesajlarını okunabilir, düzenli bir biçimde görüntüler. Anlamsal HTML ve esnek düzenlerle oluşturulan sohbet balonları, hem kullanıcı hem de sistem mesajlarını temsil eder. Frutjam sohbet sistemi birden fazla rengi, hizalamayı ve stili destekler; mesajlaşma arayüzleri, müşteri destek panelleri ve konuşma amaçlı kullanıcı arayüzü için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf                 | Tip         | Tanım                                                |
| --------------------- | ----------- | ---------------------------------------------------- |
| chat                  | Temel       | Tek bir sohbet mesajı satırı için sarmalayıcı        |
| chat-bubble           | Değiştirici | Tarz mesaj balonu                                    |
| chat-avatar           | Değiştirici | Avatar mesajın yanında görüntüleniyor                |
| chat-header           | Değiştirici | Balonun üzerindeki gönderenin adı veya meta verileri |
| chat-footer           | Değiştirici | Balonun altındaki zaman damgası veya durum           |
| chat-start            | Değiştirici | Balonu sola hizalar (gelen mesaj)                    |
| chat-end              | Değiştirici | Balonu sağa hizalar (giden mesaj)                    |
| chat-xs               | Boyut       | Ekstra küçük                                         |
| chat-sm               | Boyut       | Küçük                                                |
| chat-md               | Boyut       | Orta (varsayılan)                                    |
| chat-lg               | Boyut       | Büyük                                                |
| chat-xl               | Boyut       | Ekstra büyük                                         |
| chat-bubble-primary   | Renk        | Birincil tema renk balonu                            |
| chat-bubble-secondary | Renk        | İkincil tema renk balonu                             |
| chat-bubble-accent    | Renk        | Vurgu teması renk balonu                             |
| chat-bubble-neutral   | Renk        | Nötr tema renk balonu                                |
| chat-bubble-info      | Renk        | Bilgi anlamsal renk balonu                           |
| chat-bubble-success   | Renk        | Başarı anlamsal renk balonu                          |
| chat-bubble-warning   | Renk        | Uyarı anlamsal renk balonu                           |
| chat-bubble-error     | Renk        | Hata anlamsal renk balonu                            |

## Temel Kullanım

## Avatar'la sohbet et

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

## Sohbet Boyutları

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

## Sohbet Stilleri

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

## Sohbet Üstbilgisi ve Altbilgisi

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

## Konuşma Konusu

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