Package Reference

Replace components

When to use

Prefer this when you only need branded pieces (avatar, conversation row, composer, drawers) while keeping the default layout and data wiring. Only keys you pass are overridden — omit everything else.

Passing undefined for a key is the same as omitting it. Confirm the slot is listed as wired in the Components table before debugging why an override seems ignored.

Need a completely different shell? See Replace entire UI. For visual polish only, use classNames.

Example

tsx

<ChatMain
  {...chatConfig}
  components={{
    Avatar: MyAvatar,
    ChannelListItem: MyConversationRow,
    MessageItem: MyMessageBubble,
    MessageInput: MyComposer,
    PhoneCallButton: MyPhoneBtn,
    MembersDrawer: MyMembersPanel,
  }}
/>

Package Reference

Replace components

When to use

Passing undefined for a key is the same as omitting it. Confirm the slot is listed as wired in the Components table before debugging why an override seems ignored.

Need a completely different shell? See Replace entire UI. For visual polish only, use classNames.

Example

tsx

<ChatMain
  {...chatConfig}
  components={{
    Avatar: MyAvatar,
    ChannelListItem: MyConversationRow,
    MessageItem: MyMessageBubble,
    MessageInput: MyComposer,
    PhoneCallButton: MyPhoneBtn,
    MembersDrawer: MyMembersPanel,
  }}
/>