Code Comparison: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add code-comparison.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Languagelanguage

Show line numbersshowLineNumbers

Per-line stagger (s)stagger

0.05

Per-row duration (s)duration

0.4

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<CodeComparison/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/code-comparison.en.json

Or, 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

Code Comparison