Chat - Customization overview

Choose the right API to customize the Chat — from theme tokens to slot overrides and custom part renderers.

Choosing the right API

I want to...	Use	Where
Change colors, fonts, spacing	`ThemeProvider`	Look and feel
Apply one-off styles to this instance	`sx` prop	Look and feel
Switch between bubble and flat layout	`variant` / `density` props	Look and feel
Use Tailwind CSS	Headless primitives	Look and feel
Pass extra props to a subcomponent	`slotProps`	Structure
Replace a subcomponent entirely	`slots`	Structure
Render custom message types (tickets, charts, and so on)	`partRenderers`	Structure
Hide a built-in feature (attach, scroll-to-bottom, and so on)	`features` prop	Structure
Translate the UI	`localeText`	Structure

Customization layers

Styling and structure APIs stack—each layer wins over the one above it, so reach for the lightest layer that solves the problem:

theme          ← global rules for your whole app
  ↓
sx             ← one-off styles on a single ChatBox
  ↓
slotProps      ← extra props on a specific subcomponent
  ↓
slots          ← replace a subcomponent with your own
  ↓
partRenderers  ← render a specific message part type

The remaining APIs from the table aren't part of this stack—variant/density (layout style), the features prop (visibility), and localeText (strings) are orthogonal switches that work alongside any layer, while the headless primitives (Tailwind CSS) replace the stack entirely rather than layering on it.

The 80/20 rule

Most apps only need the top two layers:

<ThemeProvider theme={myTheme}>
  <ChatBox adapter={adapter} sx={{ height: 600 }} />
</ThemeProvider>

Material UI chat

Styled with your active MUI theme

MUI Assistant

Hello! I am styled using your active Material UI theme. Try sending a message.

You

Great — the bubble colors come from palette.primary and the typography from the theme.

Reach for slots or partRenderers only when the theme can't express what you need—for example, replacing the Composer with a fully custom input, or rendering tool-call results as cards instead of JSON.

Next steps

Look and feel—theming, brand examples (Slack, WhatsApp, ChatGPT, Claude, v0.dev), Tailwind
Structure—customization recipes, slots, slotProps, feature flags, structural props, part renderers, and localization

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<ChatBox />