Message

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

Deploying to prod real quick.

It's 4:55 PM. On a Friday.

It's a one-line change.

Delivered

It's always a one-line change

Alright, let me take a look.

Zelda is typing...

1
import {
2
  Bubble,
3
  BubbleContent,
4
  BubbleGroup,
5
  BubbleReactions,
6
} from "@/components/features/pxl/conversation/bubble";
7
import { Marker, MarkerContent } from "@/components/features/pxl/conversation/marker";
8
import {
9
  Message,
10
  MessageAvatar,
11
  MessageContent,
12
  MessageFooter,
13
} from "@/components/features/pxl/conversation/message";
14
import {
15
  Avatar,
16
  AvatarFallback,
17
  AvatarImage,
18
} from "@/components/ui/pxl/avatar";
19
import { Emoji } from "@/components/ui/pxl/emoji";
20

21
export default function MessageDemo() {
22
  return (
23
    <div className="flex w-full max-w-sm flex-col gap-6">
24
      <Message align="end">
25
        <MessageAvatar>
26
          <Avatar>
27
            <AvatarImage
28
              className="bg-primary"
29
              src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png"
30
              alt="@hero"
31
            />
32
            <AvatarFallback>HE</AvatarFallback>
33
          </Avatar>
34
        </MessageAvatar>
35
        <MessageContent>
36
          <Bubble>
37
            <BubbleContent>Deploying to prod real quick.</BubbleContent>
38
          </Bubble>
39
        </MessageContent>
40
      </Message>
41
      <Message>
42
        <MessageAvatar>
43
          <Avatar>
44
            <AvatarImage
45
              className="bg-success -scale-x-100"
46
              src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/princess.png"
47
              alt="@princess"
48
            />
49
            <AvatarFallback>PR</AvatarFallback>
50
          </Avatar>
51
        </MessageAvatar>
52
        <MessageContent>
53
          <Bubble variant="muted">
54
            <BubbleContent>It&apos;s 4:55 PM. On a Friday.</BubbleContent>
55
          </Bubble>
56
        </MessageContent>
57
      </Message>
58
      <Message align="end">
59
        <MessageAvatar>
60
          <Avatar>
61
            <AvatarImage
62
              className="bg-primary"
63
              src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png"
64
              alt="@hero"
65
            />
66
            <AvatarFallback>HE</AvatarFallback>
67
          </Avatar>
68
        </MessageAvatar>
69
        <MessageContent>
70
          <Bubble>
71
            <BubbleContent>It&apos;s a one-line change.</BubbleContent>
72
          </Bubble>
73
          <MessageFooter>Delivered</MessageFooter>
74
        </MessageContent>
75
      </Message>
76
      <Message>
77
        <MessageAvatar>
78
          <Avatar>
79
            <AvatarImage
80
              className="bg-success -scale-x-100"
81
              src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/princess.png"
82
              alt="@princess"
83
            />
84
            <AvatarFallback>PR</AvatarFallback>
85
          </Avatar>
86
        </MessageAvatar>
87
        <MessageContent>
88
          <BubbleGroup>
89
            <Bubble variant="muted">
90
              <BubbleContent>
91
                <Emoji>It&apos;s always a one-line change 😭.</Emoji>
92
              </BubbleContent>
93
            </Bubble>
94
            <Bubble variant="muted">
95
              <BubbleContent>Alright, let me take a look.</BubbleContent>
96
              <BubbleReactions aria-label="Reactions: thumbs up">
97
                <Emoji as="span">👍</Emoji>
98
              </BubbleReactions>
99
            </Bubble>
100
          </BubbleGroup>
101
        </MessageContent>
102
      </Message>
103
      <Marker role="status">
104
        <MarkerContent className="shimmer">
105
          <span className="font-medium">Zelda</span> is typing...
106
        </MarkerContent>
107
      </Marker>
108
    </div>
109
  );
110
}

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.

pnpm dlx shadcn@latest add pxl-ui/registry/conversation/message

Copy and paste the following code into your project.

1
import type { ComponentProps } from "react";
2

3
import { cn } from "@/lib/utils";
4

5
function MessageGroup({ className, ...props }: ComponentProps<"div">) {
6
  return (
7
    <div
8
      data-slot="message-group"
9
      className={cn("flex min-w-0 flex-col gap-2", className)}
10
      {...props}
11
    />
12
  );
13
}
14

15
function Message({
16
  className,
17
  align = "start",
18
  ...props
19
}: ComponentProps<"div"> & { align?: "start" | "end" }) {
20
  return (
21
    <div
22
      data-slot="message"
23
      data-align={align}
24
      className={cn(
25
        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
26
        className,
27
      )}
28
      {...props}
29
    />
30
  );
31
}
32

33
function MessageAvatar({ className, ...props }: ComponentProps<"div">) {
34
  return (
35
    <div
36
      data-slot="message-avatar"
37
      className={cn(
38
        "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden pixel-rounded pixel-size-lg bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8",
39
        className,
40
      )}
41
      {...props}
42
    />
43
  );
44
}
45

46
function MessageContent({ className, ...props }: ComponentProps<"div">) {
47
  return (
48
    <div
49
      data-slot="message-content"
50
      className={cn(
51
        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
52
        className,
53
      )}
54
      {...props}
55
    />
56
  );
57
}
58

59
function MessageHeader({ className, ...props }: ComponentProps<"div">) {
60
  return (
61
    <div
62
      data-slot="message-header"
63
      className={cn(
64
        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
65
        className,
66
      )}
67
      {...props}
68
    />
69
  );
70
}
71

72
function MessageFooter({ className, ...props }: ComponentProps<"div">) {
73
  return (
74
    <div
75
      data-slot="message-footer"
76
      className={cn(
77
        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
78
        className,
79
      )}
80
      {...props}
81
    />
82
  );
83
}
84

85
export {
86
  Message,
87
  MessageAvatar,
88
  MessageContent,
89
  MessageFooter,
90
  MessageGroup,
91
  MessageHeader,
92
};

Update the import paths to match your project setup.

Usage

1
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/pxl/avatar"
2
import { Bubble, BubbleContent } from "@/components/features/pxl/conversation/bubble"
3
import { Message, MessageAvatar, MessageContent } from "@/components/features/pxl/conversation/message"

1
<Message>
2
  <MessageAvatar>
3
    <Avatar>
4
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
5
      <AvatarFallback>CN</AvatarFallback>
6
    </Avatar>
7
  </MessageAvatar>
8
  <MessageContent>
9
    <Bubble>
10
      <BubbleContent>How can I help you today?</BubbleContent>
11
    </Bubble>
12
  </MessageContent>
13
</Message>

Note: Message owns the row layout—avatar, alignment, header, and footer. Render the visible message surface inside it with Bubble. For the scroll container around a conversation, use MessageScroller.

Composition

Use the following composition to build a message:

Message
├── MessageAvatar
└── MessageContent
    ├── MessageHeader
    ├── Bubble
    └── MessageFooter

Use MessageGroup to stack consecutive messages from the same sender:

MessageGroup
├── Message
└── 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

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.

align	Description
`start`	Align the message to the start of the conversation.
`end`	Align 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.

Header and Footer

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

Actions

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

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.

1
<MessageFooter>
2
  <Button variant="ghost" size="icon" aria-label="Copy">
3
    <CopyIcon />
4
  </Button>
5
</MessageFooter>

Status updates

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

1
<Message>
2
  <Marker role="status">
3
    <MarkerIcon>
4
      <Spinner />
5
    </MarkerIcon>
6
    <MarkerContent>Checking the logs...</MarkerContent>
7
  </Marker>
8
</Message>

API Reference

Message

The message row wrapper.

Prop	Type	Default	Description
`align`	`"start" \| "end"`	`"start"`	The alignment of the message in the conversation.
`className`	`string`	-	Additional classes to apply to the row.

MessageGroup

Groups consecutive messages from the same sender.

Prop	Type	Default	Description
`className`	`string`	-	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.

Prop	Type	Default	Description
`className`	`string`	-	Additional classes to apply to the avatar slot.

MessageContent

Wraps the header, message surface, and footer.

Prop	Type	Default	Description
`className`	`string`	-	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.

Prop	Type	Default	Description
`className`	`string`	-	Additional classes to apply to the header.

MessageFooter

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

Prop	Type	Default	Description
`className`	`string`	-	Additional classes to apply to the footer.