Message

FreeNew

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add message

Usage

import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageHeader,
} from "@/components/ui/message"

<Message align="end">
  <MessageContent>
    <Bubble>
      <BubbleContent>On it.</BubbleContent>
    </Bubble>
    <MessageFooter>Read 9:42 AM</MessageFooter>
  </MessageContent>
</Message>