brand-ui — ChangeReview

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

Install

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

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 ChangeReview component (from @elabs-ai/components-ui) 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 ChangeReview up before writing code: `npx -y @elabs-ai/components-cli docs ChangeReview` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-ui is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`). 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.

Examples

13 live examples

Empty

Single Hunk

All Approved

All Rejected

Mixed

Interactive

Controlled

Custom Renderer

Injected Hunk Renderer

Compound

Long Content

With Checks

API

`ChangeReview`

Prop	Type	Description
`hunks`required	`ChangeHunk[]`	The proposed changes to review.
`approved`	`Set<string> \| string[]`	Controlled approved set. Pass `Set<string>` or a string array. When omitted the component manages approval state internally (uncontrolled).
`onToggle`	`(id: string, next: boolean) => void`	Called when the user toggles a single hunk's approval state.
`onApproveAll`	`() => void`	Called when the user clicks "Approve all".
`onRejectAll`	`() => void`	Called when the user clicks "Reject all".
`provenance`	`ReactNode \| ChangeProvenance`	Provenance to show above the hunk list. Accepts a `ChangeProvenance` object (renders default attribution) or any ReactNode.
`renderHunk`	`ChangeReviewHunkProps["renderHunk"]`	Override the per-hunk body renderer (passed through to each `ChangeReviewHunk`).

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

`ChangeReviewHeader`

Also accepts: HTMLAttributes<HTMLDivElement>

`ChangeReviewHunk`

Prop	Type	Description
`hunk`required	`ChangeHunk`
`renderHunk`	`(hunk: ChangeHunk, state: { approved: boolean }) => ReactNode`	Override the default before/after layout. Receives the hunk data and current approval state. Return `null` to suppress the default content area.

Also accepts: Omit<HTMLAttributes<HTMLLIElement>, "children">, Omit<VariantProps<typeof hunkVariants>, "approved">

`ChangeReviewList`

Also accepts: HTMLAttributes<HTMLOListElement>

`ChangeReviewProvenance`

Prop	Type	Description
`provenance`required	`ReactNode \| ChangeProvenance`	Structured provenance object OR any ReactNode for custom rendering. When a `ChangeProvenance` object is passed, a default attribution line is rendered. Pass a ReactNode for full control.

Also accepts: HTMLAttributes<HTMLDivElement>

`ChangeReviewProvider`

Prop	Type	Description
`hunks`required	`ChangeHunk[]`
`approved`	`Set<string> \| string[]`	Controlled approved set. Pass `Set<string>` or a string array. When provided, the component is controlled and `onToggle` / `onApproveAll` / `onRejectAll` are the only way to update the state.
`onToggle`	`(id: string, next: boolean) => void`
`onApproveAll`	`() => void`
`onRejectAll`	`() => void`
`children`required	`ReactNode`