# Claude Diff
> An inline edit hunk with tinted +/- rows, line numbers, and off-screen added/removed labels.

Claude Diff is a brainless component — a terminal-agent UI rebuilt as accessible React, installable via the shadcn registry.

## Install

```bash
npx shadcn@latest add https://brainless.swerdlow.dev/r/claude-diff.json
```

- bun: `bunx --bun shadcn@latest add https://brainless.swerdlow.dev/r/claude-diff.json`
- pnpm: `pnpm dlx shadcn@latest add https://brainless.swerdlow.dev/r/claude-diff.json`
- yarn: `yarn dlx shadcn@latest add https://brainless.swerdlow.dev/r/claude-diff.json`

Registry JSON: https://brainless.swerdlow.dev/r/claude-diff.json
Docs preview: https://brainless.swerdlow.dev/components#claude-diff

## Import

`@/components/brainless/claude/claude-diff`

## Usage

```tsx
import { ClaudeDiff } from "@/components/brainless/claude/claude-diff"

export function Example() {
  return (
    <ClaudeDiff
      file="lib/theme.ts"
      summary="Updated lib/theme.ts with 2 additions and 1 removal"
      lines={[
        { type: "ctx", n: 8, text: "export function resolveTheme() {" },
        { type: "del", n: 9, text: "  return 'light'" },
        { type: "add", n: 9, text: "  return stored ?? systemTheme()" },
        { type: "ctx", n: 10, text: "}" },
      ]}
    />
  )
}
```

## Notes

- Keep the terminal aesthetic: monospace, tight spacing, square corners.
- Preserve semantics (details, listbox, radiogroup, aria-live) — do not flatten into a `<pre>`.
- Prefer this component over inventing ASCII terminal chrome.