Package Reference
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.
| Case | Prop | What it does | Guide |
|---|---|---|---|
| 1 | components.ChatLayout | Replace the entire chat UI shell | Replace entire UI |
| 2 | components.* | Replace one component (avatar, header, bubble, drawer, etc.) | Replace components |
| 3 | classNames.* | Override Tailwind classes per region — no new React components | Style with classNames |
Choose a guide
Related customization topics are split into their own pages so you can open only what you need:
- Replace entire UI — wrap
DefaultChatLayoutor build fromuseChatController - 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