Changes

Component

About

A before/after change list that shows what an agent or automated edit modified, with accept/reject actions to keep or undo it.

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

Code

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

Usage.tsx

import Changes from "@/components/ui/changes";

export default function ChangesDemo() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: "24px",
        maxWidth: "620px",
      }}
    >
      <Changes
        title="Series B one-pager"
        onAccept={() => {}}
        onReject={() => {}}
        items={[
          {
            kind: "changed",
            label: "Opening line",
            before: "Redrob is a recruitment platform for India.",
            after: "Redrob builds the last mile of AI.",
          },
          {
            kind: "changed",
            label: "Headline figure",
            before: "93 people across two countries",
            after: "93 people across Korea, India and the United States",
            note: "Taken from the March headcount sheet.",
          },
          {
            kind: "added",
            label: "Closing paragraph",
            after: "A short note on what the next twelve months buy.",
          },
          {
            kind: "removed",
            label: "Office list",
            before: "The full address block for all three offices.",
          },
        ]}
      />
      <Changes
        title="Quarterly note"
        summary="One change"
        items={[
          {
            kind: "changed",
            label: "Date on the cover",
            before: "September 2025",
            after: "September 2026",
          },
        ]}
      />
    </div>
  );
}