1 variant

Image Compare

A before and after pair split by a divider you drag, built on a real range input so the keyboard works for free.

The same photograph with its colour restored

OriginalGraded

usage.tsx

import { ImageCompare } from "@/components/registry/image-compare";

export function Grade() {
  return (
    <ImageCompare
      aspect="16 / 10"
      beforeSrc="/before.jpg"
      beforeAlt="The shot before grading"
      afterSrc="/after.jpg"
      afterAlt="The graded shot"
    />
  );
}

"use client";

import { useId, useState } from "react";
import { cn } from "@/lib/utils";

export interface ImageCompareProps {
  beforeSrc: string;
  /** Describe the before image. Both images are real content, so neither gets an empty alt. */
  beforeAlt: string;
  afterSrc: string;
  afterAlt: string;
  /** Corner label on the left image. Default "Before". */

93 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/image-compare

Props

beforeSrcRequiredstring

The image on the left of the divider.

beforeAltRequiredstring

Both images are real content, so neither gets an empty alt.

afterSrcRequiredstring

The image on the right of the divider.

afterAltRequiredstring

Describe what changed, not just the subject.

beforeLabelstringDefault "Before"

Corner pill on the left.

afterLabelstringDefault "After"

Corner pill on the right.

aspectstringDefault "4 / 3"

Reserved up front, so nothing on the page moves as the images load.

defaultValuenumberDefault 50

Where the split starts, 0 to 100.

classNamestring

Merged last, so anything passed here wins over the component's own classes.