ChatBubble

Message bubble component with sent, received, system, and AI variants. Supports avatars, timestamps, delivery status, message grouping, and streaming cursors.

View source Installation

Preview

Conversation

Alice10:30 AM

Hey! Have you seen the new design system?

10:31 AM

Yes! It looks amazing. I love the chat components.

Alice10:32 AM

Right? The theming support is great too.

AI Assistant

AssistantNow

Let me help you with that. Here is what I found...

System & Grouped

Alice joined the conversation

Hey team

Quick update on the project

We shipped v2.0!

With Reactions

Bob11:00 AM

We just hit 10k users!

Import

import { ChatBubble } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
variant	`'sent' \| 'received' \| 'system' \| 'ai'`	`'received'`	Visual style and alignment of the message bubble.
avatar	`ReactNode`	—	Avatar element displayed beside the bubble.
username	`string`	—	Display name shown above the bubble.
timestamp	`string`	—	Time string shown in the header.
status	`'sent' \| 'delivered' \| 'read'`	—	Delivery status icon (sent variant only).
grouping	`'single' \| 'first' \| 'middle' \| 'last'`	`'single'`	Controls border radius for consecutively grouped messages.
isStreaming	`boolean`	`false`	Shows an animated cursor for streaming AI responses.
actions	`ReactNode`	—	Slot for reaction buttons or actions below the bubble.
children	`ReactNode`	—	Message content.

Examples

Sent & Received

Basic two-party conversation.

import { ChatBubble } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
      <ChatBubble variant="received" username="Alice" timestamp="10:30 AM">
        Hey! How are you?
      </ChatBubble>
      <ChatBubble variant="sent" timestamp="10:31 AM" status="read">
        I'm doing great, thanks!
      </ChatBubble>
    </div>
  )
}

AI Assistant

AI-style message with streaming cursor.

import { ChatBubble } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <ChatBubble variant="ai" username="Assistant" isStreaming>
      Let me help you with that...
    </ChatBubble>
  )
}

System Message

import { ChatBubble } from '@velocityuikit/velocityui'

export default function Example() {
  return <ChatBubble variant="system">Alice joined the conversation</ChatBubble>
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */