Message
A component for displaying messages in a conversation interface, with support for avatars, markdown content, and interactive actions.
Examples
Basic Message
Hello! How can I help you today?
AI
I can help with a variety of tasks: answering questions, providing information, assisting with coding, generating creative content. What would you like help with today?
Message with Markdown
The markdown prop enables rendering content as Markdown, perfect for rich text formatting in messages.
Hello World!
This message supports bold text, italics, and other Markdown features:
- Bullet points
- Code blocks
- Links
// Even code with syntax highlighting
function hello() {
return "world";
}
Message with Actions
You can use MessageActions and MessageAction to add interactive elements to your messages.
Hello! How can I help you today?
AI
I can help with a variety of tasks: - Answering questions - Providing information - Assisting with coding - Generating creative content What would you like help with today?
Installation
npx shadcn add "https://prompt-kit.com/c/message.json"Component API
Message
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Child components to render | |
| className | string | Additional CSS classes | |
| ...props | React.HTMLProps<HTMLDivElement> | All other div props |
MessageAvatar
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | URL of the avatar image | |
| alt | string | Alt text for the avatar image | |
| fallback | string | Text to display if image fails to load | |
| delayMs | number | Delay before showing fallback (in ms) | |
| className | string | Additional CSS classes |
MessageContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content to display in the message | |
| markdown | boolean | false | Whether to render content as markdown |
| className | string | Additional CSS classes | |
| ...props | React.HTMLProps<HTMLDivElement> | All other div props |
MessageActions
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Child components to render | |
| className | string | Additional CSS classes | |
| ...props | React.HTMLProps<HTMLDivElement> | All other div props |
MessageAction
| Prop | Type | Default | Description |
|---|---|---|---|
| tooltip | React.ReactNode | Content to show in the tooltip | |
| children | React.ReactNode | Child component to trigger the tooltip | |
| className | string | Additional CSS classes for the tooltip | |
| side | "top" | "bottom" | "left" | "right" | "top" | Position of the tooltip relative to the trigger |
| ...props | React.ComponentProps<typeof Tooltip> | All other Tooltip component props |