React Diff Viewer

A code diff with unified and side-by-side (split) views, line numbers, +/- gutters, and colored add / remove lines. Toggle the view in the header; hunk headers group the changes and the additions / deletions are tallied. Pairs naturally with Tree View and Coverage Report for a code-review surface.

rtl/aes_core.sv+4 −2

			@@ -12,7 +12,9 @@ module aes_core (
12	12		input logic clk,
13	13		input logic rst_n,
14		-	input logic [127:0] key,
	14	+	input logic [255:0] key,
	15	+	input logic [1:0] keylen,
15	16		input logic [127:0] data_in,
16	17		output logic [127:0] data_out,
17		-	output logic valid
	18	+	output logic valid,
	19	+	output logic busy
18	20		);

Installation

npx shadcn@latest add "https://kelvinui.com/registry/diff-viewer.json"

Props

Prop	Type	Description
filename	string	Header file name
lines	DiffLine[]	Pre-computed diff lines
defaultView	"unified" \	"split"

Each DiffLine is { type, content, oldNo?, newNo? } where type is add | del | context | hunk. The split view pairs consecutive deletions and additions across two columns.

React Diff Viewer Copy Page

Installation

Props

React Diff Viewer