shadcn.io is not affiliated with official shadcn/ui
Shadcn Message for React
Conversation message row with optional avatar, header, footer, and alignment.
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/message.jsonnpx shadcn@latest add https://kit.dev/r/aria/message.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/message.jsonyarn shadcn@latest add https://kit.dev/r/aria/message.jsonCopy and paste the following code into your project.
"use client";
import type * as React from "react";
import { cn } from "@/lib/utils";
function MessageGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
className={cn("cn-message-group flex min-w-0 flex-col", className)}
data-slot="message-group"
{...props}
/>
);
}
function Message({
className,Update the import paths to match your project setup.
Anatomy
Message
āāā MessageAvatar
āāā MessageContent
āāā MessageHeader
āāā Bubble
āāā MessageFooterMessageGroup
āāā Message
āāā MessageUsage
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Bubble, BubbleContent } from "@/components/ui/bubble";
import { Message, MessageAvatar, MessageContent } from "@/components/ui/message";<Message className="max-w-full min-w-0">
<MessageAvatar>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</MessageAvatar>
<MessageContent className="min-w-0">
<Bubble>
<BubbleContent>How can I help you today?</BubbleContent>
</Bubble>
</MessageContent>
</Message>