File Diff

Component

About

A collapsible code diff with expandable unchanged lines, copy patch, and a Viewed toggle.

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

Code

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

Usage.tsx

import FileDiff, { type DiffHunk } from '@/components/ui/file-diff'

const hunks: DiffHunk[] = [
  {
    id: 'imports',
    header: '@@ -1,4 +1,5 @@',
    lines: [
      { content: "import * as React from 'react'", oldNumber: 1, newNumber: 1, type: 'context' },
      {
        content: "import { MessageBubble } from './message-bubble'",
        newNumber: 2,
        type: 'addition',
      },
      { content: "import { cn } from 'cn'", oldNumber: 2, newNumber: 3, type: 'context' },
    ],
  },
  {
    id: 'render',
    header: '@@ -12,4 +13,6 @@ function Message',
    hidden: [
      { content: 'interface MessageProps {', oldNumber: 4, newNumber: 5, type: 'context' },
      { content: '  children: React.ReactNode', oldNumber: 5, newNumber: 6, type: 'context' },
      { content: '}', oldNumber: 6, newNumber: 7, type: 'context' },
    ],
    lines: [
      {
        content: 'function Message({ children }: MessageProps) {',
        oldNumber: 12,
        newNumber: 13,
        type: 'context',
      },
      { content: '  return <div>{children}</div>', oldNumber: 13, type: 'deletion' },
      { content: '  return (', newNumber: 14, type: 'addition' },
      { content: '    <article className="group">', newNumber: 15, type: 'addition' },
      {
        content: '      <MessageBubble>{children}</MessageBubble>',
        newNumber: 16,
        type: 'addition',
      },
      { content: '    </article>', newNumber: 17, type: 'addition' },
      { content: '  )', newNumber: 18, type: 'addition' },
      { content: '}', oldNumber: 14, newNumber: 19, type: 'context' },
    ],
  },
]

export default function Demo() {
  return (
    <FileDiff className="w-full max-w-xl" filename="src/components/ai/message.tsx" hunks={hunks} />
  )
}