Message

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

List BoxTable

Installation

npx shadcn add https://hq-ui.vercel.app/r/nova/message

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
  • Customizable styling through the className prop on every part

Examples

Avatar

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

message-avatar
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 MessageGroup to stack consecutive messages from the same sender. Render an empty MessageAvatar on the earlier messages to keep them aligned with the avatar on the last one.

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

Header and Footer

Use MessageHeader for a sender name and MessageFooter for metadata such as a delivery or read status.

message-header-footer
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 MessageFooter, such as copy, retry, or feedback buttons.

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

Attachment

message-attachment
Workspace
Here's the image. Can you add it to the PDF? Use it for the cover page.
Done. Here's the PDF with the image added as the cover page.
sales-dashboard.pdfPDF · 2.4 MB
Thanks. Looks good.

Accessibility

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

Label icon-only actions

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

<MessageFooter>
  <Button variant="ghost" size="icon" aria-label="Copy">
    <CopyIcon />
  </Button>
</MessageFooter>

Status updates

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

<Message>
  <Marker role="status">
    <MarkerIcon>
      <Spinner />
    </MarkerIcon>
    <MarkerContent>Checking the logs...</MarkerContent>
  </Marker>
</Message>

API Reference

Message

The message row wrapper.

PropTypeDefaultDescription
align"start" | "end""start"The alignment of the message in the conversation.
classNamestring-Additional classes to apply to the row.

MessageGroup

Groups consecutive messages from the same sender.

PropTypeDefaultDescription
classNamestring-Additional classes to apply to the group root.

MessageAvatar

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

PropTypeDefaultDescription
classNamestring-Additional classes to apply to the avatar slot.

MessageContent

Wraps the header, message surface, and footer.

PropTypeDefaultDescription
classNamestring-Additional classes to apply to the content slot.

MessageHeader

Displays content above the message, such as a sender name. Stays aligned to the start regardless of align.

PropTypeDefaultDescription
classNamestring-Additional classes to apply to the header.

MessageFooter

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

PropTypeDefaultDescription
classNamestring-Additional classes to apply to the footer.
List Box
Table