Docs
AI Image Compare

AI Image Compare

Displays a beautiful AI Image Compare.

Loading...

Installation

Install the following dependencies:

npm install framer-motion

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the AI Image Changer code into your project.

API Reference

PropTypeDescription
firstImagestringfirst image for compare
secondImagestringsecond image for compare
classNamestringthe class name
slideModestring"hover"
autoplayboleanEnable automatic sliding, default false
initialSliderPercentagenumberInitial position of the slider, default 60
autoplayDurationnumberDuration of one autoplay cycle in milliseconds, default 6000
showHandlebarbooleanShow handlebar, default true

Usage

 
export function CompareDemo() {
  return (
    <div className="w-full h-[60vh] px-1 md:px-8 flex items-center justify-center [perspective:800px] [transform-style:preserve-3d]">
      <div className="p-1 md:p-4 border rounded-3xl dark:bg-neutral-900 bg-neutral-100  border-neutral-200 dark:border-neutral-800 mx-auto w-3/4 h-1/2 md:h-3/4">
        <Compare
          firstImage="/placeholder.svg"
          secondImage="/home.jpg"
          className="size-full rounded-[22px] md:rounded-lg"
          slideMode="hover"
          autoplay={true}
        />
      </div>
    </div>
  )
}
Floating DockAvatar List