Message

Displays a chat message with avatar, header, footer, and content — pairs with Bubble for the message body.

👤

Bat

Hi, how can I help you?

10:30 AM

import { Message, MessageAvatar, MessageContent, MessageHeader, MessageFooter, Bubble, BubbleContent } from "uilab-core"

export function MessagePreview() {
  return (
    <Message align="start">

Usage

import { Message, MessageAvatar, MessageContent, MessageHeader, MessageFooter } from "uilab-core"

<Message align="start">
  <MessageAvatar>👤</MessageAvatar>
  <MessageContent>
    <MessageHeader>Bat</MessageHeader>
    <Bubble>
      <BubbleContent>Hello!</BubbleContent>
    </Bubble>
    <MessageFooter>10:30 AM</MessageFooter>
  </MessageContent>
</Message>

Examples

Align

Use align="start" or align="end" to position the message and its avatar.

👤

Received message (start)

10:28 AM

Sent message (end)

10:30 AM

import { Message, MessageAvatar, MessageContent, MessageFooter, Bubble, BubbleContent } from "uilab-core"

export function MessageAlignExample() {
  return (
    <div className="flex w-full flex-col gap-4">

Group

Use MessageGroup to group consecutive messages from the same sender.

👤

John Doe

First message

Second message (same sender)

10:31 AM

import { MessageGroup, Message, MessageAvatar, MessageContent, MessageHeader, MessageFooter, Bubble, BubbleContent } from "uilab-core"

export function MessageGroupExample() {
  return (
    <MessageGroup>

Action

Place message-level actions in MessageFooter, such as copy, retry, or feedback buttons. Give each icon-only button an aria-label.

🤖

Task completed successfully.

import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,

With Attachment

Combine Message, Bubble, and Attachment to build a realistic conversation with file sharing.

Can this image be added to the PDF? Please use it on the cover page.

Got it. The image has been added to the PDF on the cover page.

sales-dashboard.pdfPDF · 2.4 MB

Thank you, it looks great.

import { DownloadIcon, FileTextIcon } from "lucide-react"
import {
  Attachment,
  AttachmentAction,
  AttachmentActions,

Message

UsageCopy Anchor Link

ExamplesCopy Anchor Link

AlignCopy Anchor Link

GroupCopy Anchor Link

ActionCopy Anchor Link