Image Comparison

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

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

Examples

npx shadcn@latest add "https://components.dylanwlim.com/c/image-comparison.json"

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.

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.

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

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.