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.
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>
);
}
Part of Spectrum UI — browse the full library on 21st.dev.