---
title: 'Message'
description: 'Lay out a single message in a conversation with avatar, alignment, header, and footer slots.'
sidebar:
  label: 'Message'
  order: 36
  badge: 'New'
---

<Component path="message/default" />

## Usage

```tsx

```

```tsx
<Message>
	<MessageAvatar>
		<Avatar>
			<AvatarImage
				src="https://avatars.githubusercontent.com/u/56068461?v=4"
				alt="@nerdfish"
			/>
			<AvatarFallback>NF</AvatarFallback>
		</Avatar>
	</MessageAvatar>
	<MessageContent>
		<Bubble>
			<BubbleContent>How can I help you today?</BubbleContent>
		</Bubble>
	</MessageContent>
</Message>
```

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

## Group

Use `MessageGroup` to stack consecutive messages from the same sender. Render an empty `MessageAvatar` on earlier messages to keep alignment with the avatar on the last one.

<Component path="message/group" />

## Header and Footer

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

<Component path="message/header-footer" />