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

draw a card

$npx shadcn@latest add @clow/diff-card

First time? Point @clow at the registry

Once per project, add the registry to your components.json. Then draw any card by name.

"registries": {
  "@clow": "https://clow.cards/r/{name}.json"
}

Full setup →

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