Image Comparison

Interactively compare two images with a draggable slider to reveal differences.

Examples

Image Comparison Basic

Tidewell weekly report in the dark theme

Tidewell weekly report in the light theme

Image Comparison with hover

Tidewell weekly report in the dark theme

Tidewell weekly report in the light theme

Image Comparison with spring options

Tidewell weekly report in the dark theme

Tidewell weekly report in the light theme

Image Comparison with custom slider

Tidewell weekly report in the dark theme

Tidewell weekly report in the light theme

Installation

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-image-comparison.json

Component API

ImageComparison

Prop	Type	Default	Description
children	React.ReactNode		ImageComparisonImage components.
className	string	undefined	Optional CSS class for styling the component.
enableHover	boolean	false	Controls whether hover effects are enabled.
springOptions	SpringOptions	`{ bounce: 0, duration: 0 }`	Options for customizing the spring animation.

ImageComparisonImage

Prop	Type	Default	Description
className	string	undefined	Optional CSS class for styling the component.
alt	string		The alt text for the image.
src	string		The source URL of the image.
position	'left' \| 'right'	'left'	The position of the image.

ImageComparisonSlider

Prop	Type	Default	Description
className	string	undefined	Optional CSS class for styling the component.