import { DiffView } from "@elabs-ai/components-ai";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-aiPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui DiffView 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 DiffView up before writing code: `npx -y @elabs-ai/components-cli docs DiffView` 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
- Carrying add/del by row tint alone — the +/− glyph and the sr-only polarity word are the channels that survive greyscale (1.4.1).
- Rendering a parse error while isStreaming — a half-arrived line is incomplete, not invalid; errors fire only on settled input.
- Forking highlightCode — intra-line colour comes from CodeBlock's Shiki helper, imported, never copied.
- Building a separate full-screen diff component — the pager prop IS the reading surface; one component, two modes.
- Importing ChangeReview's ChangeHunk (or the reverse) — the two are joined by the renderHunk seam, never by a package edge.
Works with
Used inside
Pairs with
Examples
Dark Theme
variant="split"
pager
contextLines
Loading
isStreaming
Composed into ChangeReview (ui)
Keyboard focus — expand
Focus indicator on expandable line (#313): Tab to the "show more" button and assert the compound indicator's OUTLINE layer (`outlineStyle: "solid"`, `--ring-contour`) that `focus-ring` adds — not just `boxShadow !== "none"`, which the legacy `ring-2` pattern also produces. The prior version passed a `hiddenLineCount` prop that `DiffViewProps` (`diff-view.tsx:77`) does not define — React spread it onto the DOM as a meaningless `hiddenlinecount` attribute and warned about it, and the "show more" row NEVER rendered (a real diff never mentions "50" anywhere). `getByRole("button", …)` then always threw before the focus check ran. `CollapsedRow` (`diff-view.tsx:289`) only appears when `collapseDiffRows` (`packages/ui/src/lib/diff-rows.ts`) actually collapses a context run longer than `contextLines` — so this story now supplies a real 10-line context run with `contextLines={2}`, which collapses to `top(1) + collapsed(8) + bottom(1)`, i.e. a real "Show 8 more lines" button. The button's accessible name is `t("ai.diffView.showMore", { count })`, not the literal "Show more" — matched by a count-tolerant regex so it doesn't drift with the wording.
Keyboard focus — pager
Focus indicator on scrollable pager (#313): Tab to the diff body and assert the compound indicator's OUTLINE layer on the actual scroll container. The prior version located it via `getByText(/^export/)`, which throws "multiple elements" under `variant="split"` (the same line renders once per pane) — and even resolved, `scrollDiv.parentElement` was never the scroll container itself (the text sits several nodes deep inside it). Query the tabbable scroll container directly — it carries `tabIndex={0}` and `focus-ring-inset` (`diff-view.tsx`'s `DiffViewPager`) — instead of inferring it from rendered content.
API
DiffView
| Prop | Type | Description |
|---|---|---|
linesrequired | DiffLine[] | The diff, as a flat, ordered line list. |
file | string | File path shown in the header. |
summary | string | One-line summary shown beside the file name. |
stats | { additions: number; deletions: number } | Added / removed line counts shown in the header. |
variant | "inline" | "split" | `inline` = unified single column; `split` = side-by-side. @default "inline" |
pager | boolean | Full-screen reading surface: a scrollable region with a scroll-position indicator, a key legend (↑/↓, Page Up/Down, Home/End), and a named `role="region"`. Absorbs the upstream `CodexDiff` pager shape — this prop, not a second component. |
language | BundledLanguage | Shiki language id for intra-line syntax colour. Omit to render plain text. |
contextLines | number | Collapse a run of consecutive `context` lines longer than this behind a "show more" control. |
maxLines | number | Hard cap on rendered lines. Extra lines are simply not rendered. |
loading | boolean | No renderable diff yet (loading-states.md) — layout-shaped skeleton rows at the real row height. |
isStreaming | boolean | Lines are still arriving (loading-states.md) — render what exists; never an error surface. |
Theming
The tokens each state resolves to. Change the token and every theme follows.
| State | Token |
|---|---|
| add | bg-success/10 row tint plus a text-success-text marker glyph and an sr-only polarity word |
| del | bg-destructive/10 row tint plus a text-destructive-text marker glyph and an sr-only polarity word |
| loading | layout-shaped skeleton rows at the real row height, announced once at the region |