Diff Viewer

ProNew

A line-by-line diff of two strings with added and removed lines marked.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/diff-viewer

Prop	Type	Default	Description
`before`	`string`	-	Original text.
`after`	`string`	-	Updated text.
`label`	`string`	-	Accessible name, usually a filename. Shown in the header.
`lineNumbers`	`boolean`	`true`	Show line numbers in the gutter.

Also accepts all <div> props.

The diff is a longest-common-subsequence over lines, computed on every render. It suits files of a few hundred lines.
Added and removed lines carry a screen reader prefix, so the change is not conveyed by color alone.