> ## Documentation Index
> Fetch the complete documentation index at: https://osmium.intface.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Text

> A text rendering component for message content with markdown support and proper whitespace handling.

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:

<CodeGroup>
  ```bash pnpm  theme={null}
  pnpm dlx shadcn@latest add https://registry.intface.io/message-text.json
  ```

  ```bash npm  theme={null}
  npx shadcn@latest add https://registry.intface.io/message-text.json
  ```

  ```bash yarn  theme={null}
  yarn shadcn@latest add https://registry.intface.io/message-text.json
  ```

  ```bash bun  theme={null}
  bunx --bun shadcn@latest add https://registry.intface.io/message-text.json
  ```
</CodeGroup>

## Usage

```tsx theme={null}
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

<ParamField body="children" type="string" required>
  The message text content to render. Supports markdown formatting.
</ParamField>