Code Diff Viewer

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools3.tsx instead.

Usage

The file also exports devtools3Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools3, devtools3Demo } from "@/components/blocks/devtools/devtools3";

export default function Page() {
  return <Devtools3 {...devtools3Demo} />;
}

Props

Types

type DiffLineKind = "add" | "remove" | "context";

type DiffLine = { kind: DiffLineKind; content: string };

Behavior notes

• Entirely static; no client-side interactivity, no real diffing algorithm, no syntax highlighting beyond the add/remove/context tint.
• additions and deletions in the header are plain numbers supplied by the caller; the component does not count +/- lines itself, so they can be set independently of what lines actually contains.
• Long lines scroll horizontally within the panel (overflow-x-auto) rather than wrapping, matching how real diff viewers preserve line structure.
• The dark panel is a deliberate exception to the site's semantic color tokens, matching the repo's established terminal-window convention, and stays dark regardless of site theme.