Skip to main content
The MessageText component is responsible for rendering the text content of chat messages. It wraps the Markdown component and provides proper whitespace handling with pre-wrap styling for natural text flow.

​
Installation

Install the MessageText component using the shadcn CLI: 
pnpm dlx shadcn@latest add https://registry.intface.io/message-text.json

​
Usage

import MessageText from "@/components/chat/message-text";

export default function ChatMessage() {
  const messageContent = `
Hello! This is a **markdown** message with:

- List items
- Code: \`console.log("hello")\`
- [Links](https://example.com)

Multiple paragraphs are preserved.
  `;

  return (
    <div className="message">
      <MessageText className="text-sm">
        {messageContent}
      </MessageText>
    </div>
  );
}

​
Props

​
children
string
required
The message text content to render. Supports markdown formatting.