# Image compare

> A before and after slider over two images or any two layers, for photo edits, AI image tools, redesigns and renovations.

- Type: React component (Media)
- Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add image-compare`
- Docs: https://wingo-ui.com/components/image-compare

## Interaction

Drag the handle, or anywhere on the image, to slide the divider: the before layer is revealed up to it and the after layer shows past it, following the pointer 1:1. Click or tap a spot and the divider springs there. The Before and After chips fade out while you drag and when the divider covers their corner. On a phone a sideways drag moves the divider while a vertical swipe still scrolls the page (the other way around when vertical), pinch zoom still works, and the handle has a 44px target that stays inside the frame at either end. In hover mode the divider follows a mouse without pressing; touch still drags. With the keyboard, Tab to the handle: the arrow keys move it by step, Shift moves ten steps, PageUp / PageDown move ten steps, Home / End jump to the edges, and a screen reader hears both shares.

## Installation

```bash
npx wingo-ui@latest add image-compare
```

Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add @wingo-ui/image-compare` (needs the @wingo-ui registry with your API key in components.json)

Files:

- `components/ui/image-compare.tsx`

npm dependencies: `npm i motion`

Wingo UI dependencies (installed automatically):

- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))
- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))
- [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md))
- [useMediaQuery](https://wingo-ui.com/components/use-media-query) ([Markdown](https://wingo-ui.com/components/use-media-query.md))

## Usage

```tsx
import { ImageCompare } from "@/components/ui/image-compare"

export function RetouchPreview() {
  return (
    <ImageCompare
      before="/photos/street-raw.jpg"
      after="/photos/street-graded.jpg"
      beforeAlt="Street photo, unedited"
      afterAlt="Street photo, color graded"
      beforeLabel="Raw"
      afterLabel="Graded"
      onValueChange={(value) => console.log(value)}
    />
  )
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `before` | `string \| ReactNode` |  | The layer shown up to the divider: an image URL, or any node (a screenshot component, a canvas, a video). |
| `after` | `string \| ReactNode` |  | The layer shown past the divider, and the one that sizes the frame when aspectRatio is auto. |
| `beforeAlt?` | `string` | `"Before"` | Alt text of the before image (and its name in the slider's value text). |
| `afterAlt?` | `string` | `"After"` | Alt text of the after image. |
| `value?` | `number` |  | The divider's position in percent from the left (or the top when vertical), when you control it. |
| `defaultValue?` | `number` | `50` | The starting position, uncontrolled. |
| `onValueChange?` | `(value: number) => void` |  | Called when a drag ends, on a tap, on each key press and when the mouse leaves in hover mode. Never per frame. |
| `orientation?` | `"horizontal" \| "vertical"` | `"horizontal"` | horizontal splits left and right, vertical splits top and bottom. |
| `mode?` | `"drag" \| "hover"` | `"drag"` | hover makes the divider follow a mouse without pressing (fine pointers only); touch always drags. |
| `showLabels?` | `boolean` | `true` | Chips naming each layer in its corner. |
| `beforeLabel?` | `ReactNode` | `"Before"` | The before chip. Empty hides it. |
| `afterLabel?` | `ReactNode` | `"After"` | The after chip. Empty hides it. |
| `handle?` | `"line" \| "circle" \| "arrows"` | `"arrows"` | The grip on the divider: a slim bar, a plain knob, or a knob with arrows. Every one is a 44px target. |
| `radius?` | `"none" \| "sm" \| "md" \| "lg"` | `"lg"` | Corner radius of the frame: 0, 12, 16 or 24px. |
| `aspectRatio?` | `string` | `"16/10"` | CSS aspect ratio of the frame. "auto" lets the after layer set the height. |
| `color?` | `string` | `"#ffffff"` | The divider line (and the line handle), any CSS color. |
| `step?` | `number` | `1` | Keyboard step in percent; Shift and PageUp / PageDown move ten steps. Drags and taps snap to it too. |
| `label?` | `string` | `"Comparison position"` | The slider's accessible name. |
| `valueText?` | `(value: number) => string` |  | What a screen reader hears for a position. Default: "Before 50%, After 50%" with your label names. |
| `classNames?` | `Partial<Record<"before" \| "after" \| "handle" \| "line" \| "label", string>>` |  | Classes for the before and after layers (a CSS filter on an image goes here), the knob, the divider line and both chips. |

## Parts

### ImageCompareOrientation (type)

"horizontal" | "vertical".

### ImageCompareMode (type)

"drag" | "hover".

### ImageCompareHandle (type)

"line" | "circle" | "arrows".

### ImageCompareRadius (type)

"none" | "sm" | "md" | "lg".

### ImageCompareSlot (type)

The keys of classNames.

## Examples

- **Vertical**: Top and bottom halves, a 4/3 frame and the md radius.
- **Hover mode**: The divider tracks the mouse; the line handle keeps the photo clear.
- **Custom nodes**: Two React nodes instead of images: the same dashboard in light and dark.
- **Controlled**: A slider and buttons drive the divider; it springs to each new value.

## See also

- [Image Cropper](https://wingo-ui.com/components/image-cropper) ([Markdown](https://wingo-ui.com/components/image-cropper.md))
- [Image Lightbox](https://wingo-ui.com/components/image-lightbox) ([Markdown](https://wingo-ui.com/components/image-lightbox.md))
- [Slider](https://wingo-ui.com/components/slider) ([Markdown](https://wingo-ui.com/components/slider.md))
- [Diff Viewer](https://wingo-ui.com/components/diff-viewer) ([Markdown](https://wingo-ui.com/components/diff-viewer.md))

---

Canonical: https://wingo-ui.com/components/image-compare
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt