Compare Slider
Before/after comparison slider for images, themes and redesigns.
Compare Slider overlays two layers and lets people drag a handle to reveal one over the other: before/after photos, image edits, light versus dark themes, old versus new designs. It clips with a hardware-accelerated clip-path, works with images, video or any component, follows arrow keys, and gives one gentle sweep on first view so people know it moves.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/compare-slider.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/compare-slider.
Builds on: motion
Usage
import { CompareSlider } from "@/components/ui/compare-slider";
<CompareSlider before={<img src="/before.jpg" alt="" />} after={<img src="/after.jpg" alt="" />} />Motion
A one-time GSAP sweep on mount hints that the handle moves; dragging is direct (no easing between pointer and handle).
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
CompareSlider
| Prop | Type | Default | Description |
|---|---|---|---|
| before · after | ReactNode | — | The two layers. |
| beforeLabel · afterLabel | string | "Before" · "After" | Corner labels. |
| defaultPosition | number | 50 | Start position (0–100). |
| hover | boolean | false | Follow the pointer without dragging. |
Accessibility
- The handle is a slider (aria-valuenow) operated with arrow keys; Shift moves 10%.
- Give meaningful images alt text.
FAQ
Also searched as: before after slider react · image comparison slider · react compare images · before and after image slider · image diff slider