104Get started
HextaUI

Message: Right to left

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

م
ميرا
هل وصل المكون الجديد؟
نعم، إنه على الصفحة الآن.
تمت القراءة
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>
  )
}

Add this example

This adds the example as components/examples/message/rtl.tsx, together with the Message component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/message-rtl.json

To add only the component, follow the Message installation.

Props in this example

The Message props this example sets, from the API reference.

Message

PropTypeDefault
alignSide of the conversation. Bubbles inherit it.
"start" | "end""start"

Every prop is in the Message API reference.

More Message examples

See them all, with keyboard support and accessibility notes, on the Message page.

Related components