475
Sponsor

File Change

PreviousNext

Interactive file-change review list with diff expansion, per-file accept/reject actions, and accept-all shortcut

Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/file-change

Usage

import { FileChange } from "@/components/ui/file-change";
<FileChange
  changes={[
    { path: "src/utils.ts", type: "modify", diff: "-old line\n+new line" },
    {
      path: "src/helpers.ts",
      type: "create",
      content: "export const add = (a, b) => a + b;",
    },
    { path: "src/legacy.ts", type: "delete" },
  ]}
  onAccept={(path) => console.log("accepted", path)}
  onReject={(path) => console.log("rejected", path)}
  onAcceptAll={() => console.log("accepted all")}
/>

API Reference

FileChange

PropTypeDefault
changesFileChangeItem[]required
onAccept(path: string) => void-
onReject(path: string) => void-
onAcceptAll() => void-