# Message: Alignment

> `align="end"` puts the avatar and bubbles on the other side for your own messages.

Example: https://hextaui.com/docs/message/examples/alignment
Component docs: https://hextaui.com/docs/message.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/message-alignment.json
```

This adds `components/examples/message/alignment.tsx` with the Message component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/message/alignment.tsx"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageGroup,
} from "@/components/ui/message"

export function MessageAlignment() {
  return (
    <MessageGroup className="w-full max-w-md">
      <Message>
        <MessageAvatar>
          <Avatar>
            <AvatarImage src="https://github.com/preetsuthar17.png" alt="" />
            <AvatarFallback>PS</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <Bubble variant="secondary" shape="tail">
            <BubbleContent>Start is for the people you talk to.</BubbleContent>
          </Bubble>
        </MessageContent>
      </Message>
      <Message align="end">
        <MessageAvatar>
          <Avatar>
            <AvatarFallback>ME</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <Bubble shape="tail">
            <BubbleContent>End is for you. The bubble follows.</BubbleContent>
          </Bubble>
        </MessageContent>
      </Message>
    </MessageGroup>
  )
}
```

## Props in this example

### Message

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"start" \| "end"` | `"start"` | Side of the conversation. Bubbles inherit it. |

## More Message examples

- [Header and footer](https://hextaui.com/docs/message/examples/header-footer.md)
- [Assistant](https://hextaui.com/docs/message/examples/assistant.md)
- [Long content](https://hextaui.com/docs/message/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/message/examples/rtl.md)