1Sponsor

Diff View

Unified, split, and inline diff viewer with LCS-based diff algorithm and line numbers

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/diff-view.json

Usage

import { DiffView } from "@/components/ui/diff-view";
<DiffView
  filename="config.ts"
  oldText={"const port = 3000;\nconst host = 'localhost';"}
  newText={"const port = 8080;\nconst host = 'localhost';\nconst debug = true;"}
/>

API Reference

DiffView

PropTypeDefault
oldTextstringrequired
newTextstringrequired
filenamestringundefined
languagestringundefined
mode"unified" | "split" | "inline""unified"
contextnumber3
showLineNumbersbooleanfalse