Image compare

When to use #

Use it for

Showing before and after, such as an edit or a redesign.
Pointer and keyboard comparison.

Skip it when

The images differ in framing or size.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/image-compare.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import Image from "next/image"
import { useState } from "react"
import { ImageCompare } from "@/components/ui/image-compare"

export function ImageCompareDemo() {
  const [grade, setGrade] = useState(50);
  return (
    <ImageCompare
              label="Original and graded harbour"
              value={grade}
              onValueChange={setGrade}
              beforeLabel="Original"
              afterLabel="Graded"
              className="max-w-2xl"
              before={<Image src="/media/harbour.svg" alt="Original harbour illustration" width={800} height={600} draggable={false} className="size-full object-cover" style={{ filter: "grayscale(0.85) contrast(0.92)" }} />}
              after={<Image src="/media/harbour.svg" alt="Graded harbour illustration, warmer and more saturated" width={800} height={600} draggable={false} className="size-full object-cover" style={{ filter: "saturate(1.5) hue-rotate(-14deg) brightness(1.06)" }} />}
            />
  );
}

API reference #

ImageCompare

component

PropTypeDefaultDescription

label *string—

before *ReactNode—Any visual content, usually an <img> that fills its box.

after *ReactNode—

beforeLabelstring"Before"

afterLabelstring"After"

defaultValuenumber50Percentage of the width that shows `before`.

valuenumber—

onValueChange((value: number) => void)—

aspectRatiostring"4 / 3"

classNamestring—

It exposes slider semantics, with aria-hidden, aria-label, aria-orientation, aria-valuemin, aria-valuemax and aria-valuenow kept in step with state.

KeyBehaviour

→Moves to the next item or value.

↑Moves to the previous item or value.

←Moves to the previous item or value.

↓Moves to the next item or value.

HomeJumps to the first item or the minimum.

EndJumps to the last item or the maximum.

PageUpMoves by a larger step, or to the previous page.

PageDownMoves by a larger step, or to the next page.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.