Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Chat-Blasen-Komponente

Zuletzt aktualisiert:

Nur CSS-basierte Tailwind-CSS-Chat-Blasenkomponente. Start- und Endpositionen für gesendete und empfangene Nachrichten, mit Avatar- und Zeitstempel-Slots. WCAG AA, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Chat-Komponenten zeigen Konversationsnachrichten in einem lesbaren, organisierten Format an. Chat-Blasen wurden mit semantischem HTML und flexiblen Layouts erstellt und stellen sowohl Benutzer- als auch Systemnachrichten dar. Das Frutjam-Chat-System unterstützt mehrere Farben, Ausrichtungen und Stile – ideal für Messaging-Schnittstellen, Kundensupport-Panels und Konversations-UIs.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
chatBaseWrapper für eine einzelne Chat-Nachrichtenzeile
chat-bubbleModifikatorGestylte Nachrichtenblase
chat-avatarModifikatorAvatar wird neben der Nachricht angezeigt
chat-headerModifikatorAbsendername oder Metadaten über der Blase
chat-footerModifikatorZeitstempel oder Status unterhalb der Blase
chat-startModifikatorRichtet die Blase nach links aus (eingehende Nachricht)
chat-endModifikatorRichtet die Sprechblase rechts aus (ausgehende Nachricht)
chat-xsGrößeExtra klein
chat-smGrößeKlein
chat-mdGrößeMittel (Standard)
chat-lgGrößeGroß
chat-xlGrößeExtra groß
chat-bubble-primaryFarbeFarbblase des Hauptthemas
chat-bubble-secondaryFarbeSekundärthema-Farbblase
chat-bubble-accentFarbeAkzentthema-Farbblase
chat-bubble-neutralFarbeFarbblase mit neutralem Thema
chat-bubble-infoFarbeInfo semantische Farbblase
chat-bubble-successFarbeErfolgssemantische Farbblase
chat-bubble-warningFarbeWarnende semantische Farbblase
chat-bubble-errorFarbeFehlersemantische Farbblase

Grundlegende Verwendung

Hello! How are you?
I'm doing great, thanks!
1
2
3
4
5
6
7
<div class="chat chat-start">
  <div class="chat-bubble">Hello! How are you?</div>
</div>

<div class="chat chat-end">
  <div class="chat-bubble">I'm doing great, thanks!</div>
</div>

1
2
3
4
5
6
7
<div className="chat chat-start">
  <div className="chat-bubble">Hello! How are you?</div>
</div>

<div className="chat chat-end">
  <div className="chat-bubble">I'm doing great, thanks!</div>
</div>

Chatten Sie mit Avatar

Hello!
Hi there!
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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-Größen

Small message
Medium message
Large message
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<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-Stile

Default style
Primary message
Secondary message
Accent message
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<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-Kopf- und Fußzeile

John
Thanks! I'm looking forward to it.
You
I'll see you tomorrow!
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<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>

Konversationsthread

Hello! How can I help?
I need help with my order
I'd be happy to assist you!
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Chatten-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP