shadcn.io is not affiliated with official shadcn/ui
Diff Viewer File Upload Block for React
A config diff panel: two typed deploy files compared line by line in a Split or Unified view, with Ignore whitespace and Ignore case switches, counts like +7, -3, and unchanged runs folded to a button such as 9 unchanged lines.
Installation
Overview
Review what changed between two versions of a file, with this diff viewer panel for React with Base UI. It is Deltaloft, config review for a platform team. Two typed copies of a deploy config are compared line by line by a longest-common-subsequence diff at module scope. A Toggle Group chooses Split or Unified (a phone always gets Unified), two Switches set "Ignore whitespace" and "Ignore case", and a Badge gives the counts as "+7, -3". Runs of unchanged lines fold into a button that reads, for example, "9 unchanged lines" and opens them. Each side has a File Upload strip that lists a chosen file's name and size. The panel is ruled by Guides, with a CSS entrance only. For pull-request tools, config review and audit trails.
FAQ
How is the diff worked out?
It builds the longest common subsequence of the two line lists, after normalising each line by the two options, then walks it to mark lines same, added or removed. In Split view a block of removals sits beside the additions that replaced it.
What do the switches change?
Ignore whitespace trims each line and collapses runs of spaces before comparing, so re-indenting is not a change. Ignore case compares lines in lower case. Both change the counts and the folded runs, and fold state resets.
How are unchanged lines folded?
A run of unchanged lines keeps two lines of context beside a change and folds the rest when three or more would be hidden. The button names how many are hidden and opens them, and the status line says so.
What stays local in this demo?
Both files are typed text. A chosen or dropped file is listed by name and size on its side and is never read, so the sample text is what is compared.