Diff View

Component

About

A code diff card that lists per-file line additions and deletions with per-file accept/reject actions, useful for AI coding assistant change proposals.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Diff View to your project and fits it to your theme.

Code

How Diff View is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DiffView, type FileDiff } from "@/components/ui/diff-view";

const diffs: FileDiff[] = [
  {
    id: "1",
    path: "src/utils/format.ts",
    additions: 2,
    deletions: 1,
    lines: [
      { type: "context", text: "export function formatDate(date: Date) {" },
      { type: "remove", text: "  return date.toString();" },
      { type: "add", text: "  return date.toISOString().split('T')[0];" },
      { type: "add", text: "  // formatted as YYYY-MM-DD" },
      { type: "context", text: "}" },
    ],
  },
  {
    id: "2",
    path: "src/components/Button.tsx",
    additions: 1,
    deletions: 1,
    lines: [
      { type: "context", text: "<button" },
      { type: "remove", text: '  className="btn"' },
      { type: "add", text: '  className="btn btn-primary"' },
      { type: "context", text: ">" },
    ],
  },
];

export default function DiffViewDemo() {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <DiffView
        diffs={diffs}
        onAccept={(id) => console.log("accepted", id)}
        onReject={(id) => console.log("rejected", id)}
      />
    </div>
  );
}