Add this component

npx zentauri-ui add code-diff

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Utility

Code Diff for inline comparisons

Use the Code Diff component when you need to show what changed between two versions of code — pull request reviews, changelogs, migration guides, or live editor comparisons.

5 additions • 2 deletionsBefore → After

  function greet(name) {
--  console.log("Hello, " + name);
++  console.log(`Hello, ${name}`);
    return true;
--}
++}
++
++// Added farewell
++sayGoodbye();

Code Diff playground

Toggle between unified and split views, enable or disable line numbers and gutter markers, and pick a size to preview the diff live.

View type

Size

Line numbersGutter markers

7 additions • 2 deletionsOld → New

--import { useState } from "react";
++import { useState, useCallback } from "react";
  export function Counter() {
    const [count, setCount] = useState(0);
++  const increment = useCallback(() => {
++    setCount((prev) => prev + 1);
++  }, []);
++
    return (
      <div>
        <p>Count: {count}</p>
--      <button onClick={() => setCount(count + 1)}>
++      <p>Parity: {count % 2 === 0 ? "even" : "odd"}</p>
++      <button onClick={increment}>
          Increment
        </button>
      </div>
    );
+ }

Code Diff API

Generated from the package prop types and variant definitions.

CodeDiff

CodeDiffProps

Variants

Prop	Type	Default
appearance	`default`	default
size	`lgmdsm`	md

Behavior

Prop	Type	Default
language	`string \| undefined`	none
newCode*	`string`	none
newTitle	`string \| undefined`	none
oldCode*	`string`	none
oldTitle	`string \| undefined`	none
showGutterMarkers	`boolean \| undefined`	none
showLineNumbers	`boolean \| undefined`	none
viewType	`CodeDiffViewType \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CodeDiffVariant

CodeDiffVariantProps

Behavior

Prop	Type	Default
appearance	`'default' \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

CSS variable overrides

Code Diff CSS variables

Override these code-diff variables on :root, a theme selector, or a component wrapper.

20 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-code-diff-border: #0000001a;
  --zui-code-diff-bg: oklch(98.4% 0.003 247.858);
  --zui-code-diff-fg: oklch(20.8% 0.042 265.755);
  --zui-code-diff-header-bg: oklch(92.9% 0.013 255.508);
  --zui-code-diff-header-fg: oklch(55.2% 0.046 257.417);
  --zui-code-diff-line-number-fg: oklch(55.2% 0.046 257.417);
  --zui-code-diff-added-bg: oklch(92.8% 0.109 150.96);
  --zui-code-diff-added-fg: oklch(29.1% 0.065 148.99);
  --zui-code-diff-removed-bg: oklch(93.1% 0.08 22.4);
  --zui-code-diff-removed-fg: oklch(30.7% 0.06 28.07);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-code-diff-border-dark: #ffffff1a;
  --zui-code-diff-bg-dark: oklch(12.9% 0.042 264.695);
}

What it does

The Code Diff component takes two strings of code and computes a line-by-line diff using the `diff` library.

It renders additions in green, deletions in red, and leaves unchanged lines unstyled. A sticky header shows the total additions and deletions at a glance.

Composition and API

The component accepts `oldCode` and `newCode` as required string props, and optional props for `viewType` (unified or split), `showLineNumbers`, `showGutterMarkers`, `oldTitle`, `newTitle`, `appearance`, and `size`.

Use the static entry from `@zentauri-ui/zentauri-components/ui/code-diff`. The component does not require framer-motion.

Accessibility

Diffs are rendered as HTML tables so screen readers navigate line by line with column headers. Added/removed lines use color and gutter markers (+/-) together — never rely on color alone.

The header announces the count of additions and deletions for quick scanning.

Next.js integration notes

Import from `@zentauri-ui/zentauri-components/ui/code-diff`. The component is a client component but can be imported in server components as long as the actual rendering happens on the client.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Code Diff component animate?

The base component is static (no framer-motion dependency). For animated transitions, wrap the component or use CSS transitions on the container.

Can I customize colors?

Yes. Every color is driven by CSS variables (--zui-code-diff-added-bg, --zui-code-diff-removed-bg, etc.) with sensible fallbacks. Override them in your Tailwind theme or global CSS.

What diff algorithm is used?

The component uses the battle-tested `diff` npm package under the hood. It provides word-level or line-level diffs — currently line-level with `diffLines`.

Does it work with large files?

Diff computation runs synchronously on render. For very large files, consider limiting the input size or computing the diff server-side.