Package Reference

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

<ChatMain
  {...chatConfig}
  classNames={{
    channelListItemActive: "bg-indigo-50 ring-1 ring-indigo-200",
    messageBubbleSender: "rounded-2xl shadow-sm",
    messageBubbleReceiver: "rounded-2xl bg-white",
    messageInput: "border-t border-gray-200",
  }}
/>

Package Reference

Style with classNames

When to use

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

Example

tsx

<ChatMain
  {...chatConfig}
  classNames={{
    channelListItemActive: "bg-indigo-50 ring-1 ring-indigo-200",
    messageBubbleSender: "rounded-2xl shadow-sm",
    messageBubbleReceiver: "rounded-2xl bg-white",
    messageInput: "border-t border-gray-200",
  }}
/>