Comparator
Interactively compare two elements with a draggable slider to reveal differences.
Draggable sliderWorks with any elementCustomizable physics
Basic
Features
Any Element Support
Compare images, text, code blocks, or any React component.
Hover Interaction
Optional hover mode for desktop-friendly comparison.
Spring Physics
Smooth, natural motion with configurable spring settings.
Custom Slider
Fully customizable handle and separator line.
Installation
$npx libravelui@latest add comparatorAnatomy
import { Comparator, ComparatorPane, ComparatorSlider } from "@/components/ui/motion/comparator";<Comparator><ComparatorPane position="left"> <BeforeComponent /></ComparatorPane><ComparatorPane position="right"> <AfterComponent /></ComparatorPane><ComparatorSlider /></Comparator>Testing Playground
Non-Image Content
Hover Mode
Custom Slider
Props
Loading types…