RealTimeX
Sign inStart for free
RealTimeXWeb Package
IntroductionPrerequisitesInstallationProject setupQuick start
Package structureConfigurationComponentsHooksAPI integrationSocket events
OverviewReplace entire UIReplace componentsStyle with classNamesThemes & localePhone & video callingIn-call control barFeatures
Unread badgeRich-text messagesPins, stars & datesMessage threadsMentionsCanvas & draftsNotificationsAdmin permissionsServer refusalsSession & token refresh
Host app integrationTroubleshootingFAQVersion historyBest practicesSupport & contact
Web packageCustomization

Customization

Overview

Three composable customization mechanisms are available, and you can combine all three at once. Start with the lightest option that meets your design goals - classNames for polish, individual slots for branded pieces, and a full ChatLayout only when you need a completely different shell.

CasePropWhat it doesGuide
1components.ChatLayoutReplace the entire chat UI shellReplace entire UI
2components.*Replace one component (avatar, header, bubble, drawer, etc.)Replace components
3classNames.*Override Tailwind classes per region - no new React componentsStyle with classNames

Note

Omitting any slot or className key means the package default is used automatically.

Choose a guide

Related customization topics are split into their own pages so you can open only what you need:

  • Replace entire UI - wrap DefaultChatLayout or build from useChatController
  • Replace components - override individual slots such as Avatar or MembersDrawer
  • Style with classNames - visual polish without new React components
  • Themes & locale - brand color, light/dark mode, and date formatting
  • Phone & video calling - callbacks, custom call buttons, and hiding calls
  • Features - messaging capabilities the package ships with
PreviousSocket eventsNextReplace entire UI

On this page

OverviewChoose a guide
Back to top