Image Compare

Component 2

About

A before/after image comparison slider with a draggable, keyboard-accessible divider, horizontal or vertical orientation, and an optional hover-follow mode.

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

Code

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

Usage.tsx

"use client";

import {
  ImageCompare,
  ImageCompareAfter,
  ImageCompareBefore,
  ImageCompareHandle,
  ImageCompareLabel,
} from "@/components/ui/image-compare";

export default function ImageCompareDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-8">
      <ImageCompare className="aspect-video w-full max-w-2xl rounded-lg">
        <ImageCompareBefore>
          <img
            src="https://cdn.21st.dev/assets/localized/dd4604da70cca7d688de41a6e18c20ef3a6b6e6e846c347257ae188af897f5ed.jpg"
            alt="Forest lake, original"
            className="h-full w-full object-cover grayscale"
          />
        </ImageCompareBefore>
        <ImageCompareAfter>
          <img
            src="https://cdn.21st.dev/assets/localized/dd4604da70cca7d688de41a6e18c20ef3a6b6e6e846c347257ae188af897f5ed.jpg"
            alt="Forest lake, edited"
            className="h-full w-full object-cover"
          />
        </ImageCompareAfter>
        <ImageCompareLabel side="before">Before</ImageCompareLabel>
        <ImageCompareLabel side="after">After</ImageCompareLabel>
        <ImageCompareHandle />
      </ImageCompare>
    </div>
  );
}