shadcn-preact
Components

Message

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

PreviewSource
ME
Deploying to prod real quick.
R
It's 4:55 PM. On a Friday.
ME
It's a one-line change.
Delivered
R
It's always a one-line change 😭.
Alright, let me take a look.
👍
Oliver is typing...
Example requirements

Also uses: Avatar, Bubble, Marker.

Installation

Complete the project setup first, including Tailwind CSS v4, theme tokens, and Preact compatibility aliases.

1. Install dependencies

bun add --exact cn@0.4.0 preact@11.0.0 tw-animate-css@1.4.0

The usage example also needs Avatar, Bubble. Follow their installation guides as well.

2. Copy the component with degit

Run this from your project root. It selects message.tsx, its local dependencies, and both licenses directly from the repository, then copies them into src/components/ui.

bunx degit@3.10.0 https://github.com/LiasCode/shadcn-preact#main ./.cache/shadcn-preact/message --files LICENSE.md,registry/ui/lib/utils.ts,registry/ui/message.tsx,registry/ui/primitives/LICENSE,registry/ui/primitives/internals/types.ts --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/message/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/message/LICENSE.md ./src/components/ui/LICENSE.md

The temporary copy lives in .cache/shadcn-preact/message. Existing components stay in place; shared source files are updated from main.

Selected source files (4)

Usage

import { Avatar, AvatarFallback, AvatarImage } from "./components/ui/avatar"
import { Bubble, BubbleContent } from "./components/ui/bubble"
import { Message, MessageAvatar, MessageContent } from "./components/ui/message"
<Message>
  <MessageAvatar>
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  </MessageAvatar>
  <MessageContent>
    <Bubble>
      <BubbleContent>How can I help you today?</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>

Examples

Avatar

Use MessageAvatar to render an avatar next to the message. Set align="end" on the message to align the avatar to the end of the message.

AvatarSource
Example requirements

Also uses: Avatar, Bubble.

Group

Use MessageGroup to stack consecutive messages from the same sender. Render an empty MessageAvatar on the earlier messages to keep them aligned with the avatar on the last one.

GroupSource
Example requirements

Also uses: Avatar, Bubble.

Actions

Place message-level actions in MessageFooter, such as copy, retry, or feedback buttons.

ActionsSource
Example requirements

Also uses: Bubble, Button.

bun add --exact lucide-preact@1.51.0

Attachment

AttachmentSource
Example requirements

Also uses: Attachment, Bubble.

bun add --exact lucide-preact@1.51.0

Markdown

MarkdownSource
Example requirements

Also uses: Bubble.

Copy the example’s local helpers and preserve their relative imports: markdown.tsx.

Reference

See the official Message documentation for composition patterns and API details. This page uses the Preact port and examples from the pinned upstream revision.

Component source