AI Diff

AI chats 78

About

Proposed code edit where added lines wipe in from the left and rejected lines collapse to nothing, with accept and reject actions. Respects prefers-reduced-motion.

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

Code

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

Usage.tsx

"use client";

import Component from "@/components/ui/ai-diff";

export default function DemoOne() {
  return (
    <div className="flex min-h-[440px] w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-xl">
        <Component
          lines={[
            { content: "const shouldReduceMotion = useReducedMotion();", kind: "context", number: 12 },
            { content: "", kind: "context", number: 13 },
            { content: '  transition={{ ease: "easeInOut", duration: 0.6 }}', kind: "removed", number: 14 },
            { content: "  transition={", kind: "added", number: 14 },
            { content: "    shouldReduceMotion", kind: "added", number: 15 },
            { content: "      ? { duration: 0 }", kind: "added", number: 16 },
            { content: '      : { type: "spring", duration: 0.25, bounce: 0.1 }', kind: "added", number: 17 },
            { content: "  }", kind: "added", number: 18 },
            { content: "", kind: "context", number: 19 },
          ]}
          title="components/card.tsx"
        />
      </div>
    </div>
  );
}