Diff Card

A single-sheet git-style diff on paper: +/− gutter marks, soft success/destructive washes, auto stats. No drag seam (see Code Comparison for that).

Draw

npx shadcn@latest add @clow/diff-card

Playground

hero.tsxmodified

+1 −1

1·@@ hero.tsx
2 export function Hero() {
3-  return <h1>Hello</h1>
4+  return <Button variant="glow">Open</Button>
5 }

props

filename

showLineNumbers

<DiffCard />

Examples

basic

hero.tsxmodified

+5 −1

1·@@ hero.tsx
2 export function Hero() {
3-  return <h1>Hello</h1>
4+  return (
5+    <Button variant="glow">
6+      Open the deck
7+    </Button>
8+  )
9 }

Props

prop	type	default
filename	text	hero.tsx
showLineNumbers	boolean	true