184 Components
Interactive Code Diff
CardsMonospace developer diff card with line gutters, hunk headers, collapsible code blocks, unified versus split 2-column layouts, and copy hunk controls.
src/server/auth.tsmain...feature/audit-logs
+5-2
1818 const session = await getSession(req);
1919 if (!session) {
20 - throw new Error("Unauthorized user access");
20+ // Emit telemetry audit log before redirecting
21+ await auditLog.record("AUTH_FAILURE", { ip: req.ip });
22+ return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
2123 }
2224 return session.user;
4549 const now = Date.now();
46 - return expiresAt.getTime() > now;
50+ const gracePeriodMs = 30 * 1000; // 30s leeway
51+ return expiresAt.getTime() + gracePeriodMs > now;
4752 }
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/interactive-code-diff.json"
Props
TypeScript props supported by <InteractiveCodeDiff />.
| Prop | Type | Default | Description |
|---|---|---|---|
| filename | string | "src/server/auth.ts" | File path displayed in the diff header. |
| compareRange | string | "main...feature/audit-logs" | Git branch or commit comparison range. |
| hunks | CodeDiffHunk[] | — | Array of hunk objects containing headers and line items. |
| defaultMode | "unified" | "split" | "unified" | Initial layout mode. |
Key Features
- Unified and Split 2-column layout toggle.
- Collapsible hunk headers with line range metadata (@@ -18,6 +18,10 @@).
- Distinct addition (+ green) and deletion (- red) gutter styling.
- One-click copy raw git diff format to clipboard.
- Responsive horizontal scrolling for wide code lines.
Keyboard & Accessibility
- Color-blind safe addition and deletion indicators with explicit + and - symbols.
- Collapsible hunk buttons with keyboard access.