StorybookGitHub

Message

A chat message layout primitive with avatar, header, content, and footer slots.

R
It's 4:55 PM. On a Friday.
ME
It's a one-line change.
Delivered

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/message.json

Usage

Use Message to build chat and conversation UIs. Set align="end" to flip a message to the opposite side (typically the current user), and group consecutive messages from the same sender with MessageGroup.

<script setup lang="ts">
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageHeader,
} from "@/components/ui/message";
</script>

<template>
  <Message align="end">
    <MessageAvatar>
      <img src="/avatar.png" alt="User avatar" />
    </MessageAvatar>
    <MessageContent>
      <MessageHeader>You</MessageHeader>
      <p>Sounds good, let's ship it.</p>
    </MessageContent>
  </Message>
</template>