# 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.

Example: https://hextaui.com/docs/message/examples/header-footer
Component docs: https://hextaui.com/docs/message.md

## Add this example

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

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

## Source

```tsx title="components/examples/message/header-footer.tsx"
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>
  )
}
```

## 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)
- [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)