Chat - Variants & Density

Switch between the default bubble layout and a compact messenger-style layout, and control vertical spacing with the density prop.

Variants

ChatBox supports two visual variants that control how messages are laid out: default and compact.

Default variant

The default variant renders messages as colored bubbles. The default variant right-aligns user messages with a primary-colored background and left-aligns assistant messages with a neutral background. Timestamps appear below each message. This is the standard layout used by most AI chat interfaces.

Compact variant

Set variant="compact" on ChatBox to switch to a dense, messenger-style layout:

<ChatBox variant="compact" adapter={adapter} />

Compact mode applies the following changes to the message list:

• No bubbles — messages render as plain text without background colors or padding.
• Left-aligned — all messages are left-aligned regardless of role (no right-aligned user messages).
• Group header timestamps — the timestamp moves from below each message to the group header, displayed next to the author name.
• Avatars preserved — avatars remain visible for the first message in each group.

When set on ChatBox, the variant automatically applies to the conversation list as well.

When to use each variant

The compact variant is particularly effective for conversations with many short messages from multiple participants, where bubbles would create excessive visual noise.

Density

The density prop controls the vertical spacing between messages independently of the variant. Three values are available — compact, standard (default), and comfortable — mirroring the density model used in Data Grid.

<ChatBox density="compact" adapter={adapter} />
<ChatBox density="standard" adapter={adapter} />
<ChatBox density="comfortable" adapter={adapter} />

Use the toggle in the demo below to compare the three density levels:

Density effects

Combining variant and density

The density prop is independent of variant — you can combine variant="compact" with any density value:

{
  /* Dense messenger-style layout with minimal spacing */
}
<ChatBox variant="compact" density="compact" adapter={adapter} />;

{
  /* Dense messenger-style layout with generous spacing */
}
<ChatBox variant="compact" density="comfortable" adapter={adapter} />;

This independence gives you fine-grained control over both the visual style (bubbles vs. plain text) and the spatial rhythm (tight vs. relaxed) of the chat surface.

API

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

• <ChatBox />