Message

Conversation row layout with avatar, header, footer and alignment.

Lucia10:24

Can you review the pagination PR today?

Sure, give me an hour.

10:26Read

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4import { Bubble } from '@/components/ui/bubble';
5import { Message } from '@/components/ui/message';
6
7export function Default() {
8  return (
9    <div className="flex w-full max-w-md flex-col gap-4">
10      <Message align="start">
11        <Message.Avatar>
12          <Avatar size="sm">
13            <Avatar.Fallback>LR</Avatar.Fallback>
14          </Avatar>
15        </Message.Avatar>
16        <Message.Content>
17          <Message.Header>
18            <span className="text-foreground font-medium">Lucia</span>
19            <span>10:24</span>
20          </Message.Header>
21          <Bubble variant="secondary">
22            <Bubble.Content>Can you review the pagination PR today?</Bubble.Content>
23          </Bubble>
24        </Message.Content>
25      </Message>
26      <Message align="end">
27        <Message.Avatar>
28          <Avatar size="sm">
29            <Avatar.Fallback>NA</Avatar.Fallback>
30          </Avatar>
31        </Message.Avatar>
32        <Message.Content>
33          <Bubble align="end">
34            <Bubble.Content>Sure, give me an hour.</Bubble.Content>
35          </Bubble>
36          <Message.Footer>
37            <span>10:26</span>
38            <span aria-hidden="true">·</span>
39            <span>Read</span>
40          </Message.Footer>
41        </Message.Content>
42      </Message>
43    </div>
44  );
45}

Installation

pnpm dlx nachui add message

Anatomy

1import { Message } from '@/components/ui/message';

1<Message align="start">
2  <Message.Avatar>
3    <Avatar size="sm">
4      <Avatar.Fallback>LR</Avatar.Fallback>
5    </Avatar>
6  </Message.Avatar>
7  <Message.Content>
8    <Message.Header>Lucia</Message.Header>
9    <Bubble variant="secondary">
10      <Bubble.Content>How can I help?</Bubble.Content>
11    </Bubble>
12    <Message.Footer>10:24</Message.Footer>
13  </Message.Content>
14</Message>

Message handles the layout around a message: who sent it, when, and on which side it sits. The surface itself is a Bubble. Every part is a plain element, so the whole row renders on the server.

Composition

Use the following composition to build a Message:

Message.Group
└── Message
    ├── Message.Avatar
    └── Message.Content
        ├── Message.Header
        ├── Bubble
        └── Message.Footer

Variants

Grouped

Wrap consecutive messages from the same sender in Message.Group and stack their bubbles with Bubble.Group, so the avatar and header appear once.

Lucia09:12

Morning! Quick heads up.

The registry sync job finished without errors.

All five new components are live.

Great, closing the ticket.

09:15

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4import { Bubble } from '@/components/ui/bubble';
5import { Message } from '@/components/ui/message';
6
7export function Grouped() {
8  return (
9    <div className="flex w-full max-w-md flex-col gap-4">
10      <Message.Group>
11        <Message align="start">
12          <Message.Avatar>
13            <Avatar size="sm">
14              <Avatar.Fallback>LR</Avatar.Fallback>
15            </Avatar>
16          </Message.Avatar>
17          <Message.Content>
18            <Message.Header>
19              <span className="text-foreground font-medium">Lucia</span>
20              <span>09:12</span>
21            </Message.Header>
22            <Bubble.Group align="start">
23              <Bubble variant="secondary">
24                <Bubble.Content>Morning! Quick heads up.</Bubble.Content>
25              </Bubble>
26              <Bubble variant="secondary">
27                <Bubble.Content>The registry sync job finished without errors.</Bubble.Content>
28              </Bubble>
29              <Bubble variant="secondary">
30                <Bubble.Content>All five new components are live.</Bubble.Content>
31              </Bubble>
32            </Bubble.Group>
33          </Message.Content>
34        </Message>
35      </Message.Group>
36      <Message align="end">
37        <Message.Content>
38          <Bubble align="end">
39            <Bubble.Content>Great, closing the ticket.</Bubble.Content>
40          </Bubble>
41          <Message.Footer>
42            <span>09:15</span>
43          </Message.Footer>
44        </Message.Content>
45      </Message>
46    </div>
47  );
48}