Message

A message in a conversation, with an avatar, content, header and footer.

shadcn/ui docs
EK
I checked the latest deployment and the build failed while installing dependencies. Can you share the error from the logs?
ME
Sure, sending it over now. It looks like a peer dependency issue.

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/message.json

Usage

import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageHeader,
  MessageFooter,
  MessageGroup,
} from '@/components/ui/message'
<Message>
  <MessageAvatar>
    <Avatar>
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  </MessageAvatar>
  <MessageContent>
    <Bubble>
      <BubbleContent>Hello there!</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>

The message content is usually a Bubble. Use align="end" to place the message on the right side of the conversation.

Examples

Default

EK
I checked the latest deployment and the build failed while installing dependencies. Can you share the error from the logs?
ME
Sure, sending it over now. It looks like a peer dependency issue.

Group

Use MessageGroup to group consecutive messages from the same sender.

BF
I checked the registry addresses.
EK
The component and example JSON now live under the UI registry.
Nice, that is what we wanted.
Ship it.
EK
Ekmas
The header shows who sent the message and the footer shows when.
10:24 AM
ME
You
Got it, thanks for the explanation.
10:26 AM

With Actions

AI
Here is a summary of the changes: the registry was rebuilt, two stale routes were removed and the docs were updated.