Skip to content
🚀 Influence MUI's 2026 roadmap! Take our latest Developer Survey
+

Chat - Compact variant

A messenger-style layout with no bubbles, left-aligned messages, and author names as group headers.

Set variant="compact" on ChatBox to switch the entire chat to a compact layout. Both the conversation list and the message list adapt automatically.

2
Component questions
Theme customization
Slot overrides
Component questions

Which component handles the composer?

Alice Chen
Alice Chen

Which component should I use for the message input area?

MUI Assistant
MUI Assistant

The composer is handled by the ChatBox automatically. You can override it with slots.composerRoot.

Alice Chen
Alice Chen

And what about slotProps for passing sx to the input?

What changes in compact mode

Default Compact
Colored message bubbles Plain text, no background
User messages right-aligned All messages left-aligned
Timestamp below each message Timestamp in the group header, next to author
Conversation list shows avatar + preview Conversation list shows compact title + actions