@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](https://www.npmjs.com/package/@realtimexsco/live-chat) | | Styles | @realtimexsco/live-chat/styles.css | | Requires | React 17+, Tailwind CSS v4 | | Docs | Package documentation | | License | MIT |

Socket.IO, REST client, Radix UI, Lexical (rich-text composer + message viewer), DOMPurify, emoji picker, Zustand, react-hot-toast, VideoSDK, Firebase, react-easy-crop, and chat UI ship as dependencies of this package — they install with @realtimexsco/live-chat and are removed when you uninstall it. Your app only supplies peer deps it already owns: React, React DOM, and Tailwind CSS v4.

Vite + pnpm (calling): also install @videosdk.live/react-sdk at the same version this package uses (^0.13.3) as a direct app dependency and add it to optimizeDeps.include — pnpm does not hoist nested deps, and without Vite pre-bundling, React 19's scheduler throws unstable_NormalPriority. Do not grab @latest: VideoSDK 1.x changed joinWithoutUserInteraction to auto-join, which double-joins against this package's own join() (ERROR_OPERATION_IN_PROGRESS). See docs/full-guide.md.

Install

npm install @realtimexsco/live-chat react react-dom 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 | docs/full-guide.md · docx/FULL_GUIDE.md | | Online docs | https://realtimex.softwareco.com/documentations/package | | npm package | npmjs.com/package/@realtimexsco/live-chat | | License | MIT |

License

The MIT License (MIT)

Copyright (c) 2026 RealtimeX

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.