import { PreviewCode } from "@/components/docs/preview-code.server";
import {
DiffViewerSample,
DiffViewerSplitSample,
DiffViewerViewModesSample,
DiffViewerVariantsSample,
DiffViewerSizesSample,
} from "@/components/docs/samples/diff-viewer";

Installation#

<InstallCommand shadcn={["diff-viewer"]} />

Usage#

import { DiffViewer } from "@/components/assistant-ui/diff-viewer";

// With a unified diff patch
<DiffViewer patch={diffString} />

// With file comparison
<DiffViewer
  oldFile={{ content: "old content", name: "file.txt" }}
  newFile={{ content: "new content", name: "file.txt" }}
/>

As Markdown Language Override#

Integrate with MarkdownTextPrimitive to render diff code blocks:

import { DiffViewer } from "@/components/assistant-ui/diff-viewer"; // [!code ++]

const MarkdownTextImpl = () => {
  return (
    <MarkdownTextPrimitive
      remarkPlugins={[remarkGfm]}
      className="aui-md"
      components={defaultComponents}
      componentsByLanguage={{ // [!code ++]
        diff: { // [!code ++]
          SyntaxHighlighter: ({ code }) => <DiffViewer patch={code} /> // [!code ++]
        }, // [!code ++]
      }} // [!code ++]
    />
  );
};

export const MarkdownText = memo(MarkdownTextImpl);

Examples#

Unified View#

Shows all changes in a single column with +/- indicators. This is the default mode.

<DiffViewer patch={diffString} viewMode="unified" />

Split View#

Shows old content on the left, new content on the right side-by-side.

<DiffViewer patch={diffString} viewMode="split" />

Interactive Mode Toggle#

Variants#

Sizes#

Theming#

DiffViewer uses CSS variables for colors. Override them in your CSS:

[data-slot="diff-viewer"] {
  --diff-add-bg: rgba(46, 160, 67, 0.15);
  --diff-add-text: #1a7f37;
  --diff-add-text-dark: #3fb950;
  --diff-del-bg: rgba(248, 81, 73, 0.15);
  --diff-del-text: #cf222e;
  --diff-del-text-dark: #f85149;
}

API Reference#

DiffViewer#

The main component for rendering diffs.

<ParametersTable
type="DiffViewerProps"
parameters={[
{
name: "patch",
type: "string",
description: "Unified diff string (e.g., output from git diff).",
},
{
name: "code",
type: "string",
description: "Alias for patch (for markdown integration).",
},
{
name: "oldFile",
type: "{ content: string; name?: string }",
description: "Old file for direct comparison.",
},
{
name: "newFile",
type: "{ content: string; name?: string }",
description: "New file for direct comparison.",
},
{
name: "viewMode",
type: '"unified" | "split"',
default: '"unified"',
description: "Display mode for the diff.",
},
{
name: "variant",
type: '"default" | "ghost" | "muted"',
default: '"default"',
description: "Visual style variant.",
},
{
name: "size",
type: '"sm" | "default" | "lg"',
default: '"default"',
description: "Font size.",
},
{
name: "showLineNumbers",
type: "boolean",
default: "true",
description: "Show line numbers.",
},
{
name: "showIcon",
type: "boolean",
default: "true",
description: "Show file extension badge in header.",
},
{
name: "showStats",
type: "boolean",
default: "true",
description: "Show addition/deletion counts in header.",
},
{
name: "className",
type: "string",
description: "Additional CSS classes.",
},
]}
/>

Composable API#

Style Variants (CVA)#

import {
  diffViewerVariants,
  diffLineVariants,
  diffLineTextVariants,
} from "@/components/assistant-ui/diff-viewer";

// Use variants directly
<div className={diffViewerVariants({ variant: "ghost", size: "sm" })}>
  Custom diff container
</div>

Utilities#

Styling#

Data Attributes#

Use data attributes for custom styling:

Custom CSS Example#

[data-slot="diff-viewer"][data-view-mode="split"] {
  /* Custom split view styles */
}

[data-slot="diff-viewer-line"][data-type="add"] {
  /* Custom addition styles */
}

[data-slot="diff-viewer-line"][data-type="del"] {
  /* Custom deletion styles */
}

Related Components#

• Markdown - Rich text rendering where diff viewer can be integrated
• Syntax Highlighting - Code highlighting for other languages