Comparison

A slider-based component for comparing two items in an overlay.

Installation

npx love-ui@latest add comparison

Usage

import { Comparison, ComparisonItem, ComparisonHandle } from "@/components/comparison"

<Comparison>
  <ComparisonItem>
    <img src="/before.jpg" alt="Before" />
  </ComparisonItem>
  <ComparisonHandle />
  <ComparisonItem>
    <img src="/after.jpg" alt="After" />
  </ComparisonItem>
</Comparison>

Features

Compare two items side by side with a draggable slider
Support for both hover and drag modes
Smooth animations
Touch and mouse event support
Customizable slider appearance
Responsive design that works with any content
Context provider for accessing comparison state

Examples

Hover mode

"use client";

import { Comparison, ComparisonHandle, ComparisonItem } from "../../../../../packages/comparison";
import Image from "next/image";

const Example = () => (
  <Comparison className="aspect-video" mode="hover">
    <ComparisonItem className="bg-red-500" position="left">
      <Image
        alt="Placeholder 1"
        className="opacity-50"
        height={1080}
        src="https://placehold.co/1920x1080?random=1"
        unoptimized
        width={1920}
      />
    </ComparisonItem>
    <ComparisonItem className="bg-blue-500" position="right">
      <Image
        alt="Placeholder 2"
        className="opacity-50"
        height={1440}
        src="https://placehold.co/2560x1440?random=2"
        unoptimized
        width={2560}
      />
    </ComparisonItem>
    <ComparisonHandle />
  </Comparison>
);

export default Example;

With event handlers

"use client";

import { Comparison, ComparisonHandle, ComparisonItem } from "../../../../../packages/comparison";
import Image from "next/image";

const Example = () => (
  <Comparison
    className="aspect-video"
    onDragEnd={() => console.log("drag end")}
    onDragStart={() => console.log("drag start")}
  >
    <ComparisonItem className="bg-red-500" position="left">
      <Image
        alt="Placeholder 1"
        className="opacity-50"
        height={1080}
        src="https://placehold.co/1920x1080?random=1"
        unoptimized
        width={1920}
      />
    </ComparisonItem>
    <ComparisonItem className="bg-blue-500" position="right">
      <Image
        alt="Placeholder 2"
        className="opacity-50"
        height={1440}
        src="https://placehold.co/2560x1440?random=2"
        unoptimized
        width={2560}
      />
    </ComparisonItem>
    <ComparisonHandle />
  </Comparison>
);

export default Example;

Code Block Contribution Graph