Skip to main content
Frutjam logo Frutjam
v2.2.5
Theme

Chat Bubble Component

Last updated:

CSS-only Tailwind CSS chat bubble component. Start and end positions for sent and received messages, with avatar and timestamp slots. WCAG AA, works with Django, HTMX, Laravel, React, and any stack.

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.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

Class Type Description
chatBaseWrapper for a single chat message row
chat-bubbleModifierStyled message bubble
chat-avatarModifierAvatar displayed alongside the message
chat-headerModifierSender name or metadata above the bubble
chat-footerModifierTimestamp or status below the bubble
chat-startModifierAligns bubble to the left (incoming message)
chat-endModifierAligns bubble to the right (outgoing message)
chat-xsSizeExtra small
chat-smSizeSmall
chat-mdSizeMedium (default)
chat-lgSizeLarge
chat-xlSizeExtra large
chat-bubble-primaryColorPrimary theme color bubble
chat-bubble-secondaryColorSecondary theme color bubble
chat-bubble-accentColorAccent theme color bubble
chat-bubble-neutralColorNeutral theme color bubble
chat-bubble-infoColorInfo semantic color bubble
chat-bubble-successColorSuccess semantic color bubble
chat-bubble-warningColorWarning semantic color bubble
chat-bubble-errorColorError semantic color bubble

Basic Usage

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>

Chat with 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 Sizes

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 Styles

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 Header and Footer

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>

Conversation Thread

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP gives your AI editor the exact Chat class names and structure on demand. No more hallucinated classes.

Try Cherry MCP