Message

Today

Find me a table for 4 near the office tonight.

Somewhere quiet, ideally Japanese.

Read 7:42 pm

Hark

Kaiseki Mori has a 4-top at 8:15 pm, a 6-minute walk away.

Want me to book it under your name?

Installation

pnpm dlx shadcn@latest add @paneui/message

Usage

import { Message, MessageBubble, MessageContent, MessageList } from "@/components/ui/message"

<MessageList>
  <Message from="user">
    <MessageContent>
      <MessageBubble tone="primary">What's on my calendar today?</MessageBubble>
    </MessageContent>
  </Message>
</MessageList>

Composition

MessageList
├── MessageMarker
└── Message
    ├── MessageAvatar
    ├── MessageTyping
    └── MessageContent
        ├── MessageHeader
        ├── MessageBubble
        ├── MessageMeta
        └── MessageActions
            └── MessageAction

Examples

Avatars

Hover Actions

System Rows

Compact Spacing

Animate In

Motion

Under reduced motion animateIn becomes a 150ms fade and the typing dots pulse their opacity instead of bouncing.

Accessibility

Each row is an <article> labelled "{from} message" unless you pass aria-label. MessageActions is a role="toolbar", every MessageAction gets its label as aria-label and tooltip, and MessageMarker is a role="separator".

API Reference

MessageList

Vertical stack of rows. Also accepts every prop of div.

spacing= "default": "compact" | "default"; Gap between rows: 8px or 20px.

Prop	Type	Default	Description
spacing	"compact" \| "default"	"default"	Gap between rows: 8px or 20px.

One conversation row. user rows hug the right edge. Also accepts every prop of motion.article.

from= "assistant": "user" | "assistant" | "system"; Sender; sets the side for every bubble inside.
animateIn= false: boolean; Pop up from the sender's corner once on mount.

Prop	Type	Default	Description
from	"user" \| "assistant" \| "system"	"assistant"	Sender; sets the side for every bubble inside.
animateIn	boolean	false	Pop up from the sender's corner once on mount.

data-from: user, assistant or system; children style off group-data-[from=user]/message.

Data attribute	Description
data-from	`user`, `assistant` or `system`; children style off `group-data-[from=user]/message`.

MessageAvatar

Round 32px avatar slot. Also accepts every prop of div.

placeholder= false: boolean; Render an invisible spacer instead of the avatar.

Prop	Type	Default	Description
placeholder	boolean	false	Render an invisible spacer instead of the avatar.

MessageContent

Column for bubbles, header, meta and actions; groups bubbles to the row's side. Also accepts every prop of MessageBubbleGroup.

MessageHeader

Sender name or model above the bubbles. Also accepts every prop of div.

MessageMeta

Timestamp or delivery status below the bubbles; tabular numerals. Also accepts every prop of div.

MessageActions

Toolbar of quiet icon actions. Also accepts every prop of div.

visible= false: boolean; Keep shown instead of revealing on hover / focus.

Prop	Type	Default	Description
visible	boolean	false	Keep shown instead of revealing on hover / focus.

data-visible: Present when visible.

Data attribute	Description
data-visible	Present when `visible`.

MessageAction

Ghost icon button with a tooltip. Also accepts every prop of Button.

label*: string; Tooltip text and aria-label.

Prop	Type	Default	Description
label*	string	—	Tooltip text and `aria-label`.

MessageTyping

Three-dot typing indicator in a bubble-shaped chip. Also accepts every prop of div.

label= "Typing": string; Accessible label of the status.

Prop	Type	Default	Description
label	string	"Typing"	Accessible label of the status.

MessageMarker

Centred divider between turns, such as a date, "New" or a note. Also accepts every prop of div.

MessageBubble

Re-exported from Message Bubble, along with MessageBubbleGroup and MessageBubbleCollapsible.