1 variant

Image Compare

Name: easeUI Pro
Price: 99.00 USD

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". */

85 more lines ship with an easeUI Pro license.

Buy a license

Install

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