Docs
Chat Message
Chat Message
A customizable message bubble component for chat interfaces with support for user and AI messages.
The ChatMessage component provides a styled message bubble with support for markdown content, timestamps, animations, and contextual actions.
Installation
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/chat-message.jsonUsage
import { ChatMessage } from "@/components/ui/chat-message"
export function ChatDemo() {
return (
<div className="space-y-4">
<ChatMessage
role="user"
content="Hello, how are you?"
createdAt={new Date()}
showTimeStamp
/>
<ChatMessage
role="assistant"
content="I'm doing well, thank you for asking!"
createdAt={new Date()}
showTimeStamp
/>
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
role | "user" | "assistant" | string | Required | The role of the message sender |
content | string | Required | The message content (supports markdown) |
createdAt | Date | - | Timestamp for the message |
showTimeStamp | boolean | false | Whether to show the timestamp |
animation | "none" | "slide" | "scale" | "fade" | "scale" | Animation style for the message bubble |
actions | ReactNode | - | Actions to show on hover (assistant only) |
id | string | Required | Unique identifier for the message |
attachments | File[] | - | Array of attached files |
Examples
Different Animation Styles
With Actions
With Timestamp
Custom Styling
Accessibility
- Messages are properly structured for screen readers
- Timestamps use semantic HTML
- Actions are keyboard accessible
- Color contrast meets WCAG guidelines