104Get started
HextaUI

Message: Header and footer

<MessageHeader /> holds the name and time, and <MessageFooter /> a single line of status. The avatar always lines up with the last bubble, with or without a footer.

PS
Preet Suthar9:41
Pushed the fix.
Can you check the preview?
Edited
Looks right. Merging.
Read 9:43
Sending the release notes…
Sending
import { IconChecks, IconClock } from "@tabler/icons-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Bubble, BubbleContent, BubbleGroup } from "@/components/ui/bubble"
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageGroup,
  MessageHeader,
} from "@/components/ui/message"

export function MessageHeaderFooter() {
  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>
          <MessageHeader>
            Preet Suthar
            <span className="font-normal">9:41</span>
          </MessageHeader>
          <BubbleGroup shape="tail">
            <Bubble variant="secondary">
              <BubbleContent>Pushed the fix.</BubbleContent>
            </Bubble>
            <Bubble variant="secondary">
              <BubbleContent>Can you check the preview?</BubbleContent>
            </Bubble>
          </BubbleGroup>
          <MessageFooter>Edited</MessageFooter>
        </MessageContent>
      </Message>
      <Message align="end">
        <MessageContent>
          <Bubble shape="tail">
            <BubbleContent>Looks right. Merging.</BubbleContent>
          </Bubble>
          <MessageFooter>
            <IconChecks />
            Read 9:43
          </MessageFooter>
        </MessageContent>
      </Message>
      <Message align="end">
        <MessageContent>
          <Bubble variant="muted" shape="tail">
            <BubbleContent>Sending the release notes…</BubbleContent>
          </Bubble>
          <MessageFooter>
            <IconClock />
            Sending
          </MessageFooter>
        </MessageContent>
      </Message>
    </MessageGroup>
  )
}

Add this example

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

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