Chat Bubble

vel-src: components/chat-bubble.css

A messaging UI component for rendering chat conversations. Supports left-aligned (received) and right-aligned (sent) messages with avatars, headers, footers, and color-coded bubble variants.

Class	Properties
vel-chat	flex column container, gap between messages
vel-chat-start	left-aligned message row (flex row, items at flex-start)
vel-chat-end	right-aligned message row (flex row-reverse, items at flex-end)
vel-chat-avatar	2rem circle avatar — surface-3 bg, border, centered initials or image
vel-chat-meta	flex column wrapper for header, bubble, footer; max-width: 70%
vel-chat-header	xs muted text label above bubble
vel-chat-footer	xs muted text label below bubble (e.g. timestamp, read receipt)
vel-chat-bubble	the message bubble — surface-3 bg, border, rounded corners per alignment
vel-chat-bubble-primary	gradient purple bubble for sent messages
vel-chat-bubble-success	green tint bubble variant
vel-chat-bubble-info	cyan tint bubble variant
vel-chat-bubble-danger	red tint bubble variant

Examples

Chat conversation

Alex · 2:41 PM

Hey! Have you tried VeloraCSS yet? The new chat component looks great.

Just started using it — the utility classes are super clean.

Check out the pricing component too — the featured card glow is nice.

example.html

<div style="padding:24px;background:#060b17;font-family:system-ui,sans-serif;border-radius:12px;">
  <div class="vel-chat" style="max-width:480px;">

    <!-- Received message -->
    <div class="vel-chat-start">
      <div class="vel-chat-avatar">AK</div>
      <div class="vel-chat-meta">
        <div class="vel-chat-header">Alex · 2:41 PM</div>
        <div class="vel-chat-bubble">
          Hey! Have you tried VeloraCSS yet? The new chat component looks great.
        </div>
      </div>
    </div>

    <!-- Sent message -->
    <div class="vel-chat-end">
      <div class="vel-chat-meta">
        <div class="vel-chat-bubble vel-chat-bubble-primary">
          Just started using it — the utility classes are super clean.
        </div>
        <div class="vel-chat-footer">Delivered ✓</div>
      </div>
      <div class="vel-chat-avatar" style="background:#7c5cfc;color:#fff;border:none;">Y</div>
    </div>

    <!-- Received info bubble -->
    <div class="vel-chat-start">
      <div class="vel-chat-avatar">AK</div>
      <div class="vel-chat-meta">
        <div class="vel-chat-bubble vel-chat-bubble-info">
          Check out the pricing component too — the featured card glow is nice.
        </div>
        <div class="vel-chat-footer">3:05 PM</div>
      </div>
    </div>

  </div>
</div>