104Get started
HextaUI

Message: Alignment

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

PS
Start is for the people you talk to.
ME
End is for you. The bubble follows.
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>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/message-alignment.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