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

Prerequisites

Required peer dependencies

Before installing the package, make sure your project meets the following requirements. These are the minimum versions the package has been built and tested against.

PackageMinimum VersionWhen NeededPurpose
react17+AlwaysUI framework
react-dom17+AlwaysDOM rendering
zustand4+AlwaysChat state store
tailwindcssv4AlwaysPackage UI is built with Tailwind utility classes
@tailwindcss/vitev4Vite projects onlyTailwind's Vite plugin
@tailwindcss/postcssv4Next.js projects onlyTailwind's PostCSS plugin
next13+Next.js projects onlyApp Router support
react-hot-toast2+OptionalOnly required if you use the built-in showNotification helper

Typical peer install for a Vite app (adjust the Tailwind plugin for Next.js):

pnpm add react react-dom zustand tailwindcss @tailwindcss/vite

Bundled dependencies (do not install separately)

The following libraries are already bundled inside the package and should not be added to your project's dependencies. Installing them separately can create duplicate instances (especially socket.io-client) and hard-to-debug runtime conflicts.

  • axios — REST client used by the package API layer
  • socket.io-client — realtime transport for messages and presence
  • radix-ui — accessible overlays and menus inside drawers and modals
  • lucide-react — icons used by the default UI
  • emoji-picker-react — reaction / emoji picker
  • clsx, tailwind-merge, class-variance-authority — class composition helpers

Backend credentials

You will need the following values from your RealtimeX backend (or your own compatible backend) before you can render a working chat. Obtain clientId, API host, and user JWTs from your RealtimeX dashboard or login API — then keep them in chat.config.ts (see Project Setup).

FieldExampleNotes
clientId"xxxxxxxxxxxxxxxxxxxxxxxx"Your tenant / client id
accessTokenJWT stringUser access token
loggedUserDetails._id"xxxxxxxxxxxxxxxxxxxxxxxx"Must match the _id encoded inside the JWT
loggedUserDetails.name"chat1"Display name shown in the UI
loggedUserDetails.email"chat1@example.com"Used during client-user login
apiUrlhttps://example.com/api/v1REST API base URL — must end with /api/v1
socketUrlhttps://example.comSocket host, no /api/v1 suffix; optional, derived from apiUrl if omitted
themeColor"#6366f1"Optional brand accent color

Warning

If loggedUserDetails._id does not match the _id encoded in the JWT, messages can appear on the wrong side of the conversation, contact lists may come back empty, or session sync can fail entirely. Decode the JWT (or use the id returned by your login API) to be certain the values match.
PreviousIntroductionNextInstallation

On this page

Required peer dependenciesBundled dependencies (do not install separately)Backend credentials