## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @dotui/message ``` ```bash pnpm dlx shadcn@latest add @dotui/message ``` ```bash yarn dlx shadcn@latest add @dotui/message ``` ```bash bun x shadcn@latest add @dotui/message ``` ## Usage [#usage] ```tsx import { Message, MessageContent } from "@/ui/message" ``` ```tsx {/* bubbles, text, rich content */} ``` ## Anatomy [#anatomy] `Message` lays out one turn: `align` picks the side of the thread and flips the row, so the `MessageAvatar` sits on the sender's side. `MessageContent` is the content column — put a [Bubble](/docs/components/bubble) inside for contained messages, or plain content for full-width assistant replies. `MessageHeader` and `MessageFooter` carry metadata like the sender name, timestamp, or delivery status, and consecutive messages from one sender stack in a `MessageGroup`. ```tsx import { Message, MessageAvatar, MessageContent, MessageFooter, MessageHeader, } from "@/ui/message" ``` ```tsx {/* */} Lena · 2:14 PM {/* content */} Seen ``` ## Examples [#examples] ## API Reference [#api-reference] ### MessageGroup [#messagegroup] ### Message [#message] ### MessageAvatar [#messageavatar] ### MessageContent [#messagecontent] ### MessageHeader [#messageheader] ### MessageFooter [#messagefooter]