Component

Diff Viewer

A Monaco-powered side-by-side and inline diff viewer with a file sidebar, tab bar, and status bar. Built on the headless @refraction-ui/diff-viewer core.

Side by side

The default layout renders the original and modified content next to each other, with a file sidebar and per-file add/delete counts.

Files (3)

🟡greet.ts+2-2

src

🟢format.ts+14

src/utils

🔴old-greet.js+0-9

src/legacy

🟡greet.ts

🟢format.ts

🔴old-greet.js

feature/typed-greetingsrc/greet.ts+16 -11Ready3 files

Use j / k to move between files, b to toggle the sidebar.

Installation

$pnpm add @refraction-ui/react-diff-viewer

Usage

tsx

import { DiffViewer, type DiffFile } from '@refraction-ui/react-diff-viewer'

const files: DiffFile[] = [
  { path: 'src/greet.ts', status: 'modified', additions: 2, deletions: 2 },
]

export function MyComponent() {
  return (
    <div style={{ height: 360 }}>
      <DiffViewer
        files={files}
        original={"export function greet(name) {}"}
        modified={"export function greet(name: string) {}"}
        statusBarTitle="feature/typed-greeting"
      />
    </div>
  )
}

Inline view

Set viewMode="inline" for a unified diff. The sidebar and tabs can be hidden independently.

🟡greet.ts

🟢format.ts

🔴old-greet.js

src/greet.ts+16 -113 files

Light theme

Pair theme="light" with a light Monaco theme such as monacoTheme="vs".

src/greet.ts+2 -21 file

Props

Prop	Type	Default	Description
`files`	`DiffFile[]`	--	Files in the diff. Each `DiffFile` has `path`, `status` (`added` \| `modified` \| `deleted` \| `renamed`), `additions`, and `deletions`.
`original`	`string`	`''`	Original file content shown on the left side.
`modified`	`string`	`''`	Modified file content shown on the right side.
`language`	`string`	--	Syntax-highlighting language. Auto-detected from the active file path when omitted.
`viewMode`	`'side-by-side' \| 'inline'`	`'side-by-side'`	Side-by-side or unified inline diff layout.
`theme`	`'light' \| 'dark'`	`'dark'`	Color theme for the chrome (sidebar, tabs, status bar).
`monacoTheme`	`string`	`'vs-dark'`	Monaco editor theme name (e.g. `vs`, `vs-dark`).
`showSidebar`	`boolean`	`true`	Show the file list sidebar.
`showTabs`	`boolean`	`true`	Show the file tab bar.
`showStatusBar`	`boolean`	`true`	Show the bottom status bar.
`onFileSelect`	`(index: number) => void`	--	Called when the active file changes.
`onViewModeChange`	`(mode: DiffViewMode) => void`	--	Called when the view mode changes.
`className`	`string`	--	Additional CSS classes to apply.