ui.ahmet.studio

Portfolio

Image Comparison

A draggable before/after image comparison slider. Horizontal or vertical, hover-to-reveal mode, full keyboard support, and zero dependencies.

Installation

bunx --bun shadcn@latest add https://ui.ahmet.studio/r/image-comparison

Usage

import { ImageComparison } from "@/components/ui/image-comparison";

export function Demo() {
  return (
    <ImageComparison
      className="aspect-video"
      showLabels
      before={<img src="/before.jpg" alt="" className="h-full w-full object-cover" />}
      after={<img src="/after.jpg" alt="" className="h-full w-full object-cover" />}
    />
  );
}

Features

  • Slot-based — pass any React node for before and after (images, videos, divs).
  • Pointer + keyboard — drag with mouse/touch, or tab in and use arrow keys.
  • Vertical mode — set orientation="vertical".
  • Hover to reveal — set hoverToReveal for a no-click reveal.
  • Controlled or uncontrolled — both supported.
  • A11y — proper role="slider" with aria-valuenow/aria-orientation.

Props

PropTypeDefault
beforeReactNodeRequired
afterReactNodeRequired
defaultValuenumber50
valuenumberundefined
onValueChange(value: number) => voidundefined
orientation"horizontal" | "vertical""horizontal"
showHandlebooleantrue
showLabelsbooleanfalse
hoverToRevealbooleanfalse

Keyboard

  • ← / → (or ↑ / ↓ in vertical) — adjust by 1%
  • Shift + Arrow — adjust by 10%
  • Home — set to 0%
  • End — set to 100%