Back to Components
Components
Code Diff
Side by side code diff viewer with line numbers and highlights.
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-merge