mantine-chat-components

Chat UI primitives for React: layout, scrollable messages, bubbles, and composer — built on Mantine

Source
View source code
Package
mantine-chat-components
Docs
Edit this page
Built by
Pradip Bankar (@pradip-v2)
License
MIT

Installation

yarn add mantine-chat-components

Import styles once in your app root (e.g. _app.tsx or root layout):

import 'mantine-chat-components/styles.css';

Interactive chat

Compose Chat (container), ChatMessages (scrollable list), ChatMessage (bubbles), and ChatInput (textarea + send). The demo below keeps message state in React; wire onSubmit to your API or streaming layer.

Hello! Ask me anything.
import { useState } from 'react';
import { Chat, ChatMessages, ChatMessage, ChatInput } from 'mantine-chat-components';

function Demo() {
  const [value, setValue] = useState('');
  const [messages, setMessages] = useState([
    { sender: 'assistant' as const, text: 'Hello! Ask me anything.' },
  ]);

  const send = () => {
    const text = value.trim();
    if (!text) return;
    setMessages((m) => [...m, { sender: 'user' as const, text }]);
    setValue('');
    setTimeout(() => {
      setMessages((m) => [...m, { sender: 'assistant' as const, text: 'Got it.' }]);
    }, 300);
  };

  return (
    <Chat h={360}>
      <ChatMessages>
        {messages.map((msg, i) => (
          <ChatMessage key={i} sender={msg.sender}>
            {msg.text}
          </ChatMessage>
        ))}
      </ChatMessages>
      <ChatInput value={value} onValueChange={setValue} onSubmit={send} />
    </Chat>
  );
}

Message bubble

Use the configurator to switch user vs assistant alignment and bubble colors.

This is a chat bubble. Resize the window to see max-width behavior.
User color
Assistant color
import { ChatMessage } from 'mantine-chat-components';

function Demo() {
  return (
    <ChatMessage sender="assistant" userColor="blue" assistantColor="gray">
      This is a chat bubble. Resize the window to see max-width behavior.
    </ChatMessage>
  );
}

Notes

  • Enter sends a message; Shift+Enter inserts a newline.
  • ChatInput includes an emoji grid (popover) and file attachments (onFilesChange, optional accept / multipleFiles). Set withEmojiPicker={false} or withFileUpload={false} to hide either control. Export CHAT_EMOJIS (or pass emojiList) to customize the picker. Use replyingTo + onCancelReply to show a reply preview above the field.
  • ChatMessage supports replyTo (quoted parent), reactions + onReaction (chips and + picker), onReply, and optional messageId (data-message-id).
  • Style any part via the Styles API tab using classNames, styles, or CSS variables on each component.