Component Library

Diff

A component for comparing two images with a draggable slider

Default

Interactive controls for image URLs, slider position, labels, and layout classes

Controls

Drag the slider to compare

50% / 50%

diff-playground.tsx

1<Diff
2  beforeImage="https://placehold.co/1600x900?text=Before"
3  afterImage="https://placehold.co/1600x900?text=After"
4  initialPosition={50}
5  showPercentage
6  showInstructions
7  className="w-full max-w-5xl h-[450px]"
8/>

Controls

beforeImage

afterImage

initialPosition

showPercentage

showInstructions

className

Custom Size

Interactive custom-size preset that users can tweak live via controls

Controls

Drag the slider to compare

40% / 60%

diff-custom-size-playground.tsx

1<Diff
2  beforeImage="https://placehold.co/1400x900?text=Before"
3  afterImage="https://placehold.co/1400x900?text=After"
4  initialPosition={40}
5  showPercentage
6  showInstructions
7  className="w-full max-w-2xl h-[380px]"
8/>

Controls

beforeImage

afterImage

initialPosition

showPercentage

showInstructions

className

Props

Name	Type	Default	Description
beforeImage	string	https://placehold.co/800x600	The base image shown before comparison
afterImage	string	https://placehold.co/800x600	The overlay image revealed by the slider
initialPosition	number	50	The initial position of the diff slider
showPercentage	boolean	true	Whether to show the percentage of the diff
showInstructions	boolean	true	Whether to show the instructions for the diff
className	string	w-full max-w-5xl h-[450px]	Tailwind classes for styling the diff component