ShadcnStore

Appearance

Shadcn Message ​

The shadcn/ui Message lays out a single turn in a conversation, styled with Tailwind CSS v4. It handles the avatar, alignment, header, and footer around a message's content, so you can drop in any bubble, markdown, or tool-call output as the actual conversation surface. Message is a new shadcn primitive for building AI-chat interfaces.

Key features ​

  • align="start" or "end" flips the avatar side and content alignment for the other participant vs. the current user.
  • MessageAvatar, MessageContent, MessageHeader, and MessageFooter subcomponents compose independently.
  • MessageGroup stacks consecutive turns from the same sender without repeating avatars.
  • Layout-only: works with plain text, markdown, or AI reasoning/tool-call content.
  • Themed for light and dark.

Installation ​

bash
npx shadcn@latest add message

Usage ​

tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
} from "@/components/ui/message"

export function Example() {
  return (
    <Message align="end">
      <MessageAvatar>
        <Avatar>
          <AvatarFallback>ME</AvatarFallback>
        </Avatar>
      </MessageAvatar>
      <MessageContent>
        <div className="rounded-2xl bg-primary px-3.5 py-2.5 text-primary-foreground">
          On it, one-line change.
        </div>
        <MessageFooter>Delivered</MessageFooter>
      </MessageContent>
    </Message>
  )
}

Grouping consecutive turns ​

Wrap same-sender messages in MessageGroup to stack them tightly without repeating the avatar on every line.

tsx
<MessageGroup>
  <Message>…</Message>
  <Message>…</Message>
</MessageGroup>

Accessibility ​

  • MessageContent holds arbitrary content; make sure images, code blocks, or tool output inside it carry their own accessible names.
  • Keep MessageFooter text (status like "Delivered", timestamps) short so it doesn't compete with the message itself for a screen reader user.
  • For a live "typing" or "thinking" state between messages, use a Marker with role="status", not Message.

When to use the Message ​

Use Message for any chat turn: a user prompt, an assistant reply, or a tool/system message rendered conversationally. For a non-conversational status line or separator between turns, use Marker instead.

Used in these blocks ​

Message ships with ShadcnStore's upcoming AI-Chat blocks (next release), rendering user and assistant turns, including reasoning and tool-call output. This section will link to the real blocks once they're live.

A Message pairs an Avatar with its content and is often followed by a Marker for status or separators; for the scrollable thread container around a list of messages, see Message Scroller.

FAQ ​

What is the shadcn message used for? ​

Message lays out a single turn in a conversation: an avatar, the message content, and optional header/footer, aligned to the start or end depending on the sender.

How do I align a message to the right for the current user? ​

Set align="end" on Message; the avatar and content flip to the opposite side and MessageFooter right-aligns automatically.

Can Message render AI reasoning or tool calls? ​

Yes. Message only handles layout, so MessageContent can hold any content, including reasoning steps or tool-call output for AI assistant turns.

Does Message include a chat bubble style? ​

No. Message provides layout only; add your own bubble styling (rounded background, padding) inside MessageContent, as shown in the usage example.

Copyright © 2025-2026 ShadcnStore