Code Comparison
A side-by-side code diff that reveals additions and deletions line by line, with automatic syntax coloring.
Shows the code before and after a change side by side, marking additions and deletions with a line-by-line LCS diff, along with lightweight syntax coloring and a line-by-line reveal animation.
Loading preview…
npx shadcn@latest add https://webberui.com/r/code-comparison.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
0.05
0.4
<CodeComparison />
Installation
npx shadcn@latest add https://webberui.com/r/code-comparison.jsonOr, once registries are configured in components.json, install it as @webberui/code-comparison.
Usage
import { CodeComparison } from "@/components/ui/code-comparison";
<CodeComparison
beforeCode={before}
afterCode={after}
beforeFilename="greet.js"
afterFilename="greet.ts"
language="tsx"
/>;Just pass multi-line strings to beforeCode and afterCode and the component computes the line-by-line differences itself. The left panel marks the deleted lines and the right panel marks the added ones.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
beforeCode | string | — | The source before the change |
afterCode | string | — | The source after the change |
beforeFilename | string | "before" | Filename for the left panel |
afterFilename | string | "after" | Filename for the right panel |
language | string | "tsx" | Language tag, which decides whether # is a comment and what the top-right label says |
showLineNumbers | boolean | true | Whether to show line numbers |
stagger | number | 0.05 | Interval of the line-by-line reveal (seconds) |
duration | number | 0.4 | Duration of a single line's animation (seconds) |
Accessibility
- When the user has "reduce motion" enabled at the system level, a static side-by-side diff is rendered directly, without playing the reveal animation
- Syntax coloring and the
+/-markers and color blocks for additions and deletions are all a decorative layer (aria-hidden); the code text itself is announced as usual