@realtimexsco/live-chat

Drop-in real-time chat UI for React and Next.js — direct messages, group chats, reactions, replies, forwarding, pinned/starred messages, and more. Built on Socket.IO, Zustand, Tailwind CSS v4, and Radix UI.

| | | |---|---| | Package | @realtimexsco/live-chat | | Styles | @realtimexsco/live-chat/styles.css | | Requires | React 17+, Tailwind CSS v4, Zustand 4+ | | Docs | realtimex.softwareco.com | | License | MIT |

Socket.IO, REST client, Zustand store, Radix UI, emoji picker, and chat UI are bundled. Your app only installs peer dependencies.

Install

npm install @realtimexsco/live-chat react react-dom zustand tailwindcss

Vite: npm i -D @tailwindcss/vite · Next.js: npm i -D @tailwindcss/postcss

Quick start

1. Import CSS — @import "@realtimexsco/live-chat/styles.css" and add Tailwind @source for the package dist files.
2. Create chat.config.ts with clientId, accessToken, loggedUserDetails, apiUrl, socketUrl.
3. Render <ChatMain {...chatConfig} />.

import ChatMain from "@realtimexsco/live-chat";
import { chatConfig } from "@/configs/chat.config";

export default function ChatPage() {
  return (
    <div className="h-dvh min-h-0 overflow-hidden">
      <ChatMain {...chatConfig} viewportHeight="screen" />
    </div>
  );
}

Features

DMs · groups · Socket.IO · reactions · replies · forward · edit/delete · pin/star · attachments · search · typing · read receipts · light/dark · locale/timezone · full UI customization

More information

| Topic | Link | |-------|------| | Full setup & docs | https://realtimex.softwareco.com/ | | npm package | npmjs.com/package/@realtimexsco/live-chat | | License | MIT |

License

MIT © RealtimeX