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?

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?

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	Description
children	React.ReactNode	Child components to render
className	string	Additional CSS classes
...props	`React.HTMLProps<HTMLDivElement>`	All other div props

MessageAvatar

Prop	Type	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	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