A component for displaying messages in a conversation interface, with support for avatars, markdown content, and interactive actions.
Hello! How can I help you today?
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
Install shadcn-svelte components
Install the required shadcn-svelte components for this component:
Copy the Source Code
Copy and paste the following code into your project:
Examples
Demo
Compose a chat bubble with markdown rendering and follow-up actions beneath the message.
Hello! How can I help you today?
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?
Props
Message
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Message body content such as text, actions, or other UI. |
class | string | - | Additional CSS classes for the message row. |
MessageContent
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | - | String content used when `markdown` mode is enabled. |
markdown | boolean | false | Render `content` through the `Markdown` component instead of rendering snippet children. |
children | Snippet | - | Custom content rendered when `markdown` is false. |
class | string | - | Additional CSS classes for the message bubble. |
MessageActions
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Action buttons or controls shown beneath a message. |
class | string | - | Additional CSS classes for the actions row. |
MessageAction
| Prop | Type | Default | Description |
|---|---|---|---|
tooltip | Snippet | - | Tooltip content rendered for the action trigger. |
children | Snippet | - | Interactive element that opens the tooltip. |
side | "top" | "bottom" | "left" | "right" | "top" | Tooltip placement relative to the trigger. |
class | string | - | Additional CSS classes for the tooltip content. |