Message

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download message -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Message } from "@/components/ui/message";
import { MessageContent } from "@/components/ui/message";
import { Bubble } from "@/components/ui/bubble";
import { BubbleContent } from "@/components/ui/bubble";

const args = {
  "align": "start",
  "text": "Your report is ready.",
} satisfies Partial<
  InstanceType<typeof Message> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { align?: "start" | "end" };
</script>

<template>
  <Message :align="args.align"
    ><MessageContent
      ><Bubble
        ><BubbleContent>{{ args.text }}</BubbleContent></Bubble
      ></MessageContent
    ></Message
  >
</template>

Examples

Default

<script setup lang="ts">
import { Message } from "@/components/ui/message";
import { MessageAvatar } from "@/components/ui/message";
import { Avatar } from "@/components/ui/avatar";
import { AvatarImage } from "@/components/ui/avatar";
import { AvatarFallback } from "@/components/ui/avatar";
import { MessageContent } from "@/components/ui/message";
import { Bubble } from "@/components/ui/bubble";
import { BubbleContent } from "@/components/ui/bubble";
import { MessageFooter } from "@/components/ui/message";
import { BubbleGroup } from "@/components/ui/bubble";
import { BubbleReactions } from "@/components/ui/bubble";
import { Marker } from "@/components/ui/marker";
import { MarkerContent } from "@/components/ui/marker";

const args = {

} satisfies Partial<
  InstanceType<typeof Message> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex w-[380px] flex-col gap-6 py-12">
    <Message align="end">
      <MessageAvatar>
        <Avatar
          ><AvatarImage
            src="https://github.com/shadcn.png"
            alt="@me"
          /><AvatarFallback>ME</AvatarFallback></Avatar
        >
      </MessageAvatar>
      <MessageContent>
        <Bubble
          ><BubbleContent>Deploying to prod real quick.</BubbleContent></Bubble
        >
      </MessageContent>
    </Message>
    <Message>
      <MessageAvatar>
        <Avatar
          ><AvatarImage
            src="https://github.com/vercel.png"
            alt="@rabbit"
          /><AvatarFallback>R</AvatarFallback></Avatar
        >
      </MessageAvatar>
      <MessageContent>
        <Bubble variant="muted"
          ><BubbleContent>It's 4:55 PM. On a Friday.</BubbleContent></Bubble
        >
      </MessageContent>
    </Message>
    <Message align="end">
      <MessageAvatar>
        <Avatar
          ><AvatarImage
            src="https://github.com/shadcn.png"
            alt="@me"
          /><AvatarFallback>ME</AvatarFallback></Avatar
        >
      </MessageAvatar>
      <MessageContent>
        <Bubble><BubbleContent>It's a one-line change.</BubbleContent></Bubble>
        <MessageFooter>Delivered</MessageFooter>
      </MessageContent>
    </Message>
    <Message>
      <MessageAvatar>
        <Avatar
          ><AvatarImage
            src="https://github.com/vercel.png"
            alt="@rabbit"
          /><AvatarFallback>R</AvatarFallback></Avatar
        >
      </MessageAvatar>
      <MessageContent>
        <BubbleGroup>
          <Bubble variant="muted"
            ><BubbleContent
              >It's always a one-line change 😭.</BubbleContent
            ></Bubble
          >
          <Bubble variant="muted">
            <BubbleContent>Alright, let me take a look.</BubbleContent>
            <BubbleReactions role="img" aria-label="Reactions: thumbs up"
              ><span>👍</span></BubbleReactions
            >
          </Bubble>
        </BubbleGroup>
      </MessageContent>
    </Message>
    <Marker role="status">
      <MarkerContent
        ><span class="font-medium">Oliver</span> is typing...</MarkerContent
      >
    </Marker>
  </div>
</template>

With Header

<script setup lang="ts">
import { Message } from "@/components/ui/message";
import { MessageAvatar } from "@/components/ui/message";
import { Avatar } from "@/components/ui/avatar";
import { AvatarImage } from "@/components/ui/avatar";
import { AvatarFallback } from "@/components/ui/avatar";
import { MessageContent } from "@/components/ui/message";
import { MessageHeader } from "@/components/ui/message";
import { Bubble } from "@/components/ui/bubble";
import { BubbleContent } from "@/components/ui/bubble";
import { MessageFooter } from "@/components/ui/message";

const args = {

} satisfies Partial<
  InstanceType<typeof Message> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex w-[380px] flex-col gap-6 py-12">
    <Message>
      <MessageAvatar>
        <Avatar
          ><AvatarImage
            src="https://github.com/vercel.png"
            alt="@rabbit"
          /><AvatarFallback>R</AvatarFallback></Avatar
        >
      </MessageAvatar>
      <MessageContent>
        <MessageHeader>evilrabbit · 4:55 PM</MessageHeader>
        <Bubble variant="muted"
          ><BubbleContent>Shipping on a Friday again?</BubbleContent></Bubble
        >
        <MessageFooter>Read</MessageFooter>
      </MessageContent>
    </Message>
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Message

MessageAvatar

MessageContent

MessageFooter

MessageGroup

MessageHeader

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.