ImageCompare

A before/after image slider with a draggable handle. Drag or click anywhere on the image to reveal more of the before or after state. Perfect for showcasing edits, redesigns, or transformations.

Interactive Demo

Drag the handle left or right to compare the two images.

Custom handle color

Tailor the handle color to match your brand.

Usage

import { ImageCompare } from "@mantleui/react/motion";

<ImageCompare
  beforeImage="/before.jpg"
  afterImage="/after.jpg"
  beforeAlt="Original"
  afterAlt="Edited"
  height={400}
  defaultPosition={50}
/>

Props

Prop	Type	Default	Description
`beforeImage`	`string`	—	URL of the "before" image (shown fully underneath).
`afterImage`	`string`	—	URL of the "after" image (clipped by the slider).
`beforeAlt`	`string`	—	Alt text for the before image.
`afterAlt`	`string`	—	Alt text for the after image.
`defaultPosition`	`number`	`50`	Initial slider position in percent (0-100).
`height`	`number \| string`	`400`	Height of the compare area.
`handleColor`	`string`	`"#ffffff"`	Color of the draggable handle.

beforeImage

string

URL of the "before" image (shown fully underneath).

afterImage

string

URL of the "after" image (clipped by the slider).

beforeAlt

string

Alt text for the before image.

afterAlt

string

Alt text for the after image.

defaultPosition50

number

Initial slider position in percent (0-100).

height400

number | string

Height of the compare area.

handleColor"#ffffff"

string

Color of the draggable handle.