brand-ui — MessageCompare

import { MessageCompare } from "@elabs-ai/components-ai";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui MessageCompare component (from @elabs-ai/components-ai) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look MessageCompare up before writing code: `npx -y @elabs-ai/components-cli docs MessageCompare` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-ai is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Avoid

Reaching for it to show a patch — nothing here is line-level; reading lines of a diff is DiffView and approving hunks is ChangeReview.
Reaching for MessageCompareProvider/useMessageCompare() from a sibling control — both are unexported internal details; MessageCompare always owns a private instance, so use the controlled syncScroll/onSyncScrollChange props instead.
Passing a columns count that disagrees with the number of MessageCompareColumn children — the grid renders from the actual children, not from columns, so a mismatch renders silently with no dev warning.
Expecting a shared 'stick to bottom' driver across columns — each column's scroll is independent by construction; the only cross-column motion is the opt-in syncScroll proportional broadcast.
Lifting MessageFeedback state above the column boundary — each MessageCompareColumn composes its own independent MessageFeedback instance with no shared vote state.

Works with

Contains

MessageCompareColumn

Pairs with

MessageFeedback
MessageResponse
MessageBranch

Examples

8 live examples

Streaming

Both columns still generating — the `Shimmer` status indicator per header.

With Error

One column failed — `role="alert"` + icon + `text-destructive-text`, never colour alone.

Three Columns

Three responses side by side (`columns` supports 2-4).

Four Columns

Four responses — the upper bound of `columns`.

Synced Scroll

Long content in both columns with a `syncScroll` toggle — scrolling one column proportionally moves its sibling while the toggle is on (issue #23).

Mobile

Below the `md` breakpoint the grid collapses to a `MessageBranch`-style tab strip.

Focus Indicator

Focus indicator on scrollable compare column (#313): Tab to the column body and assert the compound indicator's OUTLINE layer. The prior version read `role="region"` — that's `MessageCompareColumn`'s OUTER wrapper (`message-compare.tsx:416`, header + body), which never receives focus or `focus-ring-inset`. The actual scrollable, tabbable, styled element is the nested `[data-slot="message-compare-column-body"]` div (`message-compare.tsx:441-446`) — querying the region always read `boxShadow: "none"` off the wrong node, regardless of the fix.

API

`MessageCompare`

Prop	Type	Description
`children`required	`ReactNode`	`MessageCompareColumn` elements — 2 to 4.
`columns`required	`MessageCompareColumnsCount`
`syncScroll`	`boolean`	Controlled sync-scroll flag. Omit for the uncontrolled default (off).
`defaultSyncScroll`	`boolean`	Uncontrolled initial value. @default false
`onSyncScrollChange`	`(value: boolean) => void`
`tabsLabel`	`string`	aria-label for the narrow-viewport tab strip. Defaults to microcopy.

Also accepts: Omit<HTMLAttributes<HTMLDivElement>, "children">

`MessageCompareColumn`

Prop	Type	Description
`model`required	`MessageCompareModel`	Identifies the column — its `name` becomes the region's accessible name.
`status`	`ChatStatus`	In-flight state for this column's OWN response, independent of siblings.
`children`	`ReactNode`	The consumer's own `Message`/`MessageResponse` composition for this column.

Also accepts: Omit<HTMLAttributes<HTMLDivElement>, "children">

Theming

The tokens each state resolves to. Change the token and every theme follows.

State	Token
divider	`border-b (default border color, the subtle rung) between a column's header and body — same as the package's other header/body dividers`
error	`text-destructive-text (TEXT rung, not -foreground) paired with AlertTriangleIcon + role="alert" — colour is never the only channel`