RealTimeX
Start For Free

RealTimeX

Package Documentation

IntroductionPrerequisitesInstallationProject setupQuick start
Package structureConfigurationComponentsHooksAPI integrationSocket events
OverviewReplace entire UIReplace componentsStyle with classNamesThemes & localePhone & video callingIn-call control barFeatures
TroubleshootingFAQVersion historyBest practicesSupport & contact

Package Reference

Installation

Step 1 — Install the package and its peers

Install the package and its peer dependencies with your preferred package manager:

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

Step 2 — Install the Tailwind v4 plugin for your framework

Vite projects:

shell
pnpm add -D @tailwindcss/vite @vitejs/plugin-react vite

Next.js projects:

shell
pnpm add -D @tailwindcss/postcss
# next is usually already installed

Step 3 — Verify the install

Confirm the package resolved and TypeScript types are available:

shell
npm ls @realtimexsco/live-chat
ls node_modules/@realtimexsco/live-chat/dist/index.d.ts   # TypeScript types must exist

Step 4 — Configure CSS, the config file, and your chat page

Installation alone is not enough — the UI needs Tailwind v4 scanning, theme CSS variables, and a config object with credentials. Complete these next:

  1. Add Tailwind imports, @source paths, and --chat-theme* tokens — follow Project Setup.
  2. Create chat.config.ts with clientId, access token, loggedUserDetails, apiUrl, and socketUrl.
  3. Render <ChatMain {...chatConfig} /> inside a height-bounded page — see Quick Start.

Step 5 — Run your app

Start your Vite or Next.js dev server and open the route that renders ChatMain. You should see the default chat shell once CSS and credentials are correct.

Note

No .npmrc file or private registry token is required — the package is published on the public npm registry.
PreviousPrerequisitesNextProject setup

On this page

Step 1 — Install the package and its peersStep 2 — Install the Tailwind v4 plugin for your frameworkStep 3 — Verify the installStep 4 — Configure CSS, the config file, and your chat pageStep 5 — Run your app