Components

Message

Displays a message in a conversation, with optional avatar, header, footer, and alignment.

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

Usage

The Message component lays out a single message in a conversation. It handles the avatar, alignment, header, and footer around the message surface.

For AI apps, you can render reasoning steps, tool calls and assistant messages using the Message component.

ME
Deploying to prod real quick.
R
It's 4:55 PM. On a Friday.
ME
It's a one-line change.
Delivered
R
It's always a one-line change 😭.
Alright, let me take a look.
👍
Oliver is typing...

Note: Message owns the row layout — avatar, alignment, header, and footer. Render the visible message surface inside it with Bubble.

Anatomy

vue

Message Anatomy.vue

<template>
  <UiMessageGroup>
    <UiMessage>
      <UiMessageAvatar />
      <UiMessageContent>
        <UiMessageHeader />
        <UiBubble />
        <UiMessageFooter />
      </UiMessageContent>
    </UiMessage>
  </UiMessageGroup>
</template>

Use UiMessageGroup to stack consecutive messages from the same sender.

Features

  • Start and end alignment for sender and receiver rows via the align prop
  • Avatar slot that anchors to the bottom of the message and stays clear of the footer
  • Header and footer slots for sender names, status, and message actions
  • Footer follows the message side; actions stay aligned on align="end" rows
  • Group wrapper for stacking consecutive messages from the same sender
  • Every part renders through Primitive, so as / as-child and Vue class overrides work on any part

Examples

Avatar

Use UiMessageAvatar to render an avatar next to the message. Set align="end" on the message to align the avatar to the end of the message.

R
The build failed during dependency installation.
R
Can you share the exact error?
R
Here's the error from the logs
Something went wrong with the build. The libraries are not installed correctly. Try running the build again.
alignDescription
startAlign the message to the start of the conversation.
endAlign the message to the end of the conversation.

Group

Use UiMessageGroup to stack consecutive messages from the same sender. Render an empty UiMessageAvatar on the earlier messages to keep them aligned with the avatar on the last one.

I checked the registry addresses.
CN
The component and example JSON now live under the UI registry.

Header and Footer

Use UiMessageHeader for a sender name and UiMessageFooter for metadata such as a delivery or read status.

Olivia
I already checked the logs.
Send the report to the team. Ping @shadcn if you need help.
Read Yesterday

Actions

Place message-level actions in UiMessageFooter, such as copy, retry, or feedback buttons.

The install failure is coming from the workspace package.
Okay drop me a link. Taking a look...
Failed to send

Accessibility

Message is a presentational layout wrapper. Accessibility comes from the content you place inside it.

Label icon-only actions

Action buttons in UiMessageFooter are usually icon-only, so give each one an aria-label.

<template>
  <UiMessageFooter>
    <UiButton variant="ghost" size="icon" aria-label="Copy">
      <Icon name="lucide:copy" />
    </UiButton>
  </UiMessageFooter>
</template>

Status updates

For in-progress messages, use a Marker with role="status" so assistive tech announces the update as it appears.

<template>
  <UiMessage>
    <UiMarker role="status">
      <UiMarkerIcon>
        <Icon name="lucide:loader-circle" class="animate-spin" />
      </UiMarkerIcon>
      <UiMarkerContent>Checking the logs...</UiMarkerContent>
    </UiMarker>
  </UiMessage>
</template>

API Reference

All Message parts render through Primitive. Use as to choose another element, or as-child to merge the component's attributes and styles onto the single element or component in its default slot.

Message

The message row wrapper.

PropTypeDefaultDescription
align"start" | "end""start"The alignment of the message in the conversation.
asPrimitiveProps["as"]"div"Element or component to render.
as-childbooleanfalseRender the default slot as the root and merge props onto it.
classHTMLAttributes["class"]-Additional classes to apply to the row.

MessageGroup

Groups consecutive messages from the same sender.

PropTypeDefaultDescription
asPrimitiveProps["as"]"div"Element or component to render.
as-childbooleanfalseRender the default slot as the root and merge props onto it.
classHTMLAttributes["class"]-Additional classes to apply to the group root.

MessageAvatar

The avatar slot, aligned to the bottom of the message. When the message has a UiMessageFooter, the avatar shifts up to stay aligned with the message surface instead of the footer.

PropTypeDefaultDescription
asPrimitiveProps["as"]"div"Element or component to render.
as-childbooleanfalseRender the default slot as the root and merge props onto it.
classHTMLAttributes["class"]-Additional classes to apply to the avatar wrapper.

MessageContent

Wraps the header, message surface, and footer.

PropTypeDefaultDescription
asPrimitiveProps["as"]"div"Element or component to render.
as-childbooleanfalseRender the default slot as the root and merge props onto it.
classHTMLAttributes["class"]-Additional classes to apply to the content wrapper.

MessageHeader

Displays content above the message, such as a sender name. Aligns to the message side.

PropTypeDefaultDescription
asPrimitiveProps["as"]"div"Element or component to render.
as-childbooleanfalseRender the default slot as the root and merge props onto it.
classHTMLAttributes["class"]-Additional classes to apply to the header.

MessageFooter

Displays content below the message, such as status or actions. Aligns to the message side.

PropTypeDefaultDescription
asPrimitiveProps["as"]"div"Element or component to render.
as-childbooleanfalseRender the default slot as the root and merge props onto it.
classHTMLAttributes["class"]-Additional classes to apply to the footer.

Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Message Scroller

A scroll container for chat transcripts that anchors turns, follows streamed replies, restores prepended history, and jumps to messages.