Comparison
An interactive image comparison component with hover and drag modes, perfect for showcasing before/after images.
Installation
CLI
Dependencies
This component requires the following npm packages:
Registry Dependencies
This component also requires: utils
Usage
Comparison is an interactive component for showcasing side-by-side comparisons, perfect for before/after images, design iterations, or any visual comparisons.
It supports two interaction modes: hover for quick exploration and drag for precise control. The component uses Framer Motion for smooth animations and is fully accessible.
Examples
Hover Mode
In hover mode, the slider follows your mouse cursor automatically. Perfect for quick comparisons without requiring click and drag.
Drag Mode with Handlers
Use onDragStart andonDragEnd callbacks to track drag state and provide visual feedback or perform actions.
API Reference
Comparison Props
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "hover" | "drag" | "drag" | Interaction mode. 'hover' follows mouse position, 'drag' requires click and drag. |
onDragStart | () => void | - | Callback fired when dragging starts (drag mode only). |
onDragEnd | () => void | - | Callback fired when dragging ends (drag mode only). |
ComparisonItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
position* | "left" | "right" | - | Position of the item. 'left' is revealed from left, 'right' from right. |
ComparisonHandle Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Custom handle content. Defaults to a vertical line with grip icon (drag mode only). |