# Code Diff Viewer

Review of code changes in developer tools and forges.

- id: `code-diff-viewer`
- Page: https://agentic-ui-kit.com/components/code-diff-viewer
- Live preview: https://agentic-ui-kit.com/live/component/code-diff-viewer

## Install

```bash
agentic-ui add code-diff-viewer
npx shadcn@4.17.0 add @agentic-ui/code-diff-viewer
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** split-view, inline-view, syntax-highlight, hunk-collapse, keyboard-navigation, line-numbers, rename-display, diff-stats, controlled-layout
- **Intents:** explore-detail, audit-trail, compare-over-time
- **Suits domains:** devtools, ai-workspace, saas, operations
- **Interaction:** keyboard-navigation, view-switching, hunk-expansion, error-retry
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** review of code changes in developer tools and forges, inspection of edits generated by an agent in an ai-workspace, comparison of configuration or template versions in a SaaS product, configuration drift audit in operations dashboards
- **Avoid when:** comparison of time series or metrics (use a compare-over-time chart), content editing; the viewer is read-only
- **Preserve when adapting:** diff-grammar, interaction-model, keyboard-shortcuts, layout-switching
- **Replace when adapting:** domain-copy, language-set, token-palette, locale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, card, label, switch