Compare

Component 625

About

A comparison component between two images, slide or drag to compare

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Compare to your project and fits it to your theme.

Code

How Compare is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react";
import { Compare } from "@/components/ui/compare";

export function CompareDemo() {
  return (
    <div className="p-4 border rounded-3xl dark:bg-neutral-900 bg-neutral-100  border-neutral-200 dark:border-neutral-800 px-4">
      <Compare
        firstImage="https://cdn.21st.dev/assets/mirror/34/34c2fcbcbf333e9fb81d39b9009234ba646b679aa47ee8003d241fd57c1ff7b5.png"
        secondImage="https://cdn.21st.dev/assets/mirror/c1/c18e199a92ef3e9e7f5b5594336f50ee12da686566c0afa532c72dbd13d109a9.png"
        firstImageClassName="object-cover object-left-top"
        secondImageClassname="object-cover object-left-top"
        className="h-[250px] w-[200px] md:h-[500px] md:w-[500px]"
        slideMode="hover"
      />
    </div>
  );
}