Message

Chat message primitives with fluid slide-in animations from each bubble's tail.

Installation

npx shadcn@latest add @iconiq/message

File Structure

Usage

import {
  Message,
  MessageAvatar,
  MessageBubble,
  MessageContent,
  MessageGroup,
} from "@/components/ui/message";

export function Conversation() {
  return (
    <MessageGroup>
      <Message align="end">
        <MessageAvatar>EV</MessageAvatar>
        <MessageContent>
          <MessageBubble variant="primary">
            Deploying to prod real quick.
          </MessageBubble>
        </MessageContent>
      </Message>
      <Message align="start">
        <MessageAvatar>KD</MessageAvatar>
        <MessageContent>
          <MessageBubble>It's 4:55 PM. On a Friday.</MessageBubble>
        </MessageContent>
      </Message>
    </MessageGroup>
  );
}

Props

Props
Description

Message

align

Which side the message belongs to. 'end' reads as sent — row reversed, bubble on the right, entrance from the right. 'start' reads as received — bubble on the left, entrance from the left.

Type "start" | "end"·Default "start"

animated

Play the slide-in entrance on mount. Set to false for history that is already on screen, so only newly arriving messages animate.

Type boolean·Default true

className

Extra classes for the message row.

Type string

MessageBubble

variant

default is a muted pill for received messages, primary is a filled primary pill for sent messages, and ghost drops the pill entirely for plain-text replies like streamed AI responses.

Type "default" | "primary" | "ghost"·Default "default"

className

Extra classes for the bubble.

Type string

MessageGroup, MessageAvatar, MessageContent, MessageHeader, MessageFooter

MessageGroup

Vertical stack for a conversation — messages and gaps, nothing else.

Type div

MessageAvatar

Circular avatar slot anchored to the bottom of the row, next to the bubble's tail. Rises above the footer when one is present.

Type div

MessageContent

Column holding bubble, header, and footer. Right-aligns its children when the message is align='end'.

Type div

MessageHeader

Small muted label above the bubble — sender name, role, or channel.

Type div

MessageFooter

Small muted label below the bubble — timestamps or delivery state. Right-aligns on sent messages.

Type div

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.