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/message.jsonnpx shadcn@latest add https://kit.dev/r/message.jsonpnpm dlx shadcn@latest add https://kit.dev/r/message.jsonyarn shadcn@latest add https://kit.dev/r/message.jsonInstall the following dependencies:
bun add @ark-ui/reactnpm install @ark-ui/reactpnpm add @ark-ui/reactyarn add @ark-ui/reactCopy and paste the following code into your project.
"use client";
import { ark } from "@ark-ui/react/factory";
import type React from "react";
import { cn } from "@/lib/utils";
export const MessageGroup = (props: React.ComponentProps<typeof ark.div>) => {
const { className, ...rest } = props;
return (
<ark.div
className={cn("cn-message-group flex min-w-0 flex-col", className)}
data-slot="message-group"
{...rest}
/>
);
};
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>Demos
Avatar
Group
Header and Footer
Actions
Attachment
Markdown
API Reference
Message
div
PropType
AttributeType
MessageGroup
div
PropType
AttributeType
MessageAvatar
div
PropType
AttributeType
MessageContent
div
PropType
AttributeType
MessageHeader
div
PropType
AttributeType
MessageFooter
div
PropType
AttributeType