## Diff Viewer (S—195)

A code diff with unified and split views, +/− counts, collapsed unchanged lines you can expand, and per-line comments.

- URL: https://sundaeui.dev/components/diff-viewer
- Category: Cards & data visualization · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/diff-viewer.json`
- Tags: changes, diff, compare, code-review, git, pull-request

Switch between unified and side-by-side. Long runs of unchanged lines fold into a “Show N lines” row; expand them in place.
Hover a line number to add a comment; it threads under that line. Additions and removals are marked with symbols, not only tone.

### Usage

```tsx
import { DiffViewer } from '@/components/sundae/diff-viewer'

<DiffViewer />
```

### Props

- `before / after` (`string`, required): Old and new text.
- `file` (`string`): File name.
- `view` (`'unified' | 'split'`, default `'unified'`): Starting view.
- `context` (`number`, default `2`): Unchanged lines kept around changes.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Code review, config history, document versions.

### When not to use

- Prose with heavy rewording: a rendered compare reads better.

### Accessibility

- Each changed line says “added” or “removed” to screen readers.
- The view switch is a radiogroup; expand rows are buttons with the line count.
- Reduced motion removes the movement and keeps every state change.