# Message: Right to left

> Start and end swap sides, and new messages grow from the matching corner.

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

## Add this example

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

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

## Source

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

export function MessageRtl() {
  return (
    <div dir="rtl" className="w-full max-w-md">
      <MessageGroup>
        <Message>
          <MessageAvatar>
            <Avatar>
              <AvatarImage src="https://github.com/preetsuthar17.png" alt="" />
              <AvatarFallback>م</AvatarFallback>
            </Avatar>
          </MessageAvatar>
          <MessageContent>
            <MessageHeader>ميرا</MessageHeader>
            <Bubble variant="secondary">
              <BubbleContent>هل وصل المكون الجديد؟</BubbleContent>
            </Bubble>
          </MessageContent>
        </Message>
        <Message align="end">
          <MessageContent>
            <Bubble>
              <BubbleContent>نعم، إنه على الصفحة الآن.</BubbleContent>
            </Bubble>
            <MessageFooter>تمت القراءة</MessageFooter>
          </MessageContent>
        </Message>
      </MessageGroup>
    </div>
  )
}
```

## Props in this example

### Message

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

## More Message examples

- [Alignment](https://hextaui.com/docs/message/examples/alignment.md)
- [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)