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

Style with classNames

When to use

When the structure is fine and you only need visual polish, pass classNames for the regions you care about. Values merge with package defaults - you do not need to restate every class for a region, only the overrides.

Omitting a key keeps the package default for that region. For structural changes, use Replace components or Replace entire UI.

Example

tsx
1<ChatMain2  {...chatConfig}3  classNames={{4    channelListItemActive: "bg-indigo-50 ring-1 ring-indigo-200",5    messageBubbleSender: "rounded-2xl shadow-sm",6    messageBubbleReceiver: "rounded-2xl bg-white",7    messageInput: "border-t border-gray-200",8  }}9/>
PreviousReplace componentsNextThemes & locale

On this page

When to useExample
Back to top