Back to Components
Content
Code Diff
Side by side code diff viewer with line numbers and highlights.
PropsUsage ExampleVariations
Changes
AdditionsDeletions
Before
1export function Stats() {
2 const total = 1200;
3 return (
4 <p>Total users</p>
5 );
6}
After
1export function Stats() {
2 const total = 1432;
3 return (
4 <p>Total active users</p>
5 );
6}
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/code-diff.tsx
Installation
Using shadcn CLI
npx shadcn add code-diff --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Content Components
Changelog Entry
Version entry with tags, date, and collapsible details.
Code Block
Code display with optional highlighted HTML and a copy button.
Link Preview
OpenGraph style preview card with image, title, description, and domain.
Quote Block
Styled blockquote with attribution and optional avatar.
Terminal Window
Retro terminal window with title bar, prompt, and typing effect.