Image Compare
Before/after comparison slider with pointer drag and full keyboard support. Works with image URLs or any ReactNode, supports horizontal/vertical orientation and optional autoplay.
Pro features
What the Pro version adds to this component.
Drag to Compare
Smooth pointer dragging with clip-path — zero layout thrash.
Two Orientations
Split left/right or top/bottom with a single prop.
Full Keyboard Support
Arrow keys, Shift steps and Home/End on an ARIA slider.
Autoplay Hint
Gentle in-view oscillation that stops on interaction.
Images or ReactNodes
Compare photos, layouts or live components interchangeably.
Accessible by Default
role=slider with live aria-valuenow and a visible focus ring.
Installation
Install via CLI
npx @moontra/moonui-cli add image-compareUsage
Examples
Horizontal (images)
Drag the handle, or focus it and use the arrow keys, to wipe between two images. The overlay is clipped with clip-path, so dragging never triggers layout.
Vertical orientation
Set orientation="vertical" to split top/bottom instead of left/right. Arrow keys and the handle icon adapt automatically.
Any ReactNode content
before and after accept arbitrary ReactNodes, not just image URLs — compare live components, layouts or gradients side by side.
Autoplay
With autoplay the divider gently oscillates once the slider scrolls into view, hinting that it's interactive. It stops permanently on the first user interaction and is fully disabled under prefers-reduced-motion.