Message

Displays a message in a conversation, with optional avatar, header, footer, and alignment.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-8">

The Message component lays out a single message row. It handles the avatar, alignment, header, and footer around the visible message surface. Render the surface with Bubble, and wrap long transcripts with MessageScroller.

Installation#

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Message
Copy

Usage#

Copy<Message>
  <Message.Avatar>
    <Avatar>
      <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
      <Avatar.Fallback> {"CN"->React.string} </Avatar.Fallback>
    </Avatar>
  </Message.Avatar>
  <Message.Content>
    <Bubble variant=Muted>
      <Bubble.Content> {"How can I help you today?"->React.string} </Bubble.Content>
    </Bubble>
  </Message.Content>
</Message>

Composition#

CopyMessage
├── Message.Avatar
└── Message.Content
    ├── Message.Header
    ├── Bubble
    └── Message.Footer

Use Message.Group to stack consecutive messages from the same sender.

Features#

• Start and end alignment through the align prop
• Avatar slot anchored to the message row
• Header and footer slots for sender names, timestamps, and actions
• Group wrapper for consecutive messages
• Custom styling through className on every part

Examples#

Avatar#

Use Message.Avatar to render an avatar next to the message. Set align=End to align the row to the end of the conversation.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-8">

Group#

Use Message.Group to stack consecutive messages from the same sender.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-8">

Header and Footer#

Use Message.Header for a sender name and Message.Footer for metadata or actions.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-8">

Attachment#

Compose Attachment inside Message.Content to render files attached to a message.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-8">

Accessibility#

Message is a presentational layout wrapper. Accessibility comes from the content you place inside it. Give icon-only action buttons in Message.Footer an ariaLabel.

API Reference#

Message#