Mantine Compare Component

  ❤️ If this component has been useful to you or your team, please consider becoming a sponsor  

Overview

This component is created on top of the Mantine library.

Mantine Compare provides an interactive before/after viewer for any React nodes or images, with a slider you can drag, reveal on hover, or lock to a position. Configure the divider angle (0° for left/right, 90° for top/bottom, any value for diagonal) and control the initial split via defaultPosition. Built for Mantine, it includes a Styles API for fine‑grained styling and consistent layout and accessibility.

Installation

npm install @gfazioli/mantine-compare

or

yarn add @gfazioli/mantine-compare

After installation import package styles at the root of your application:

import '@gfazioli/mantine-compare/styles.css';

Usage

import { Compare } from '@gfazioli/mantine-compare';
import { Image } from '@mantine/core';

function Demo() {
  return (
    <Compare
      leftSection={
        <Image
          src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&auto=format&fit=crop"
          alt="Before"
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        />
      }
      rightSection={
        <Image
          src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&auto=format&fit=crop"
          alt="After"
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        />
      }
    />
  );
}

Sponsor

  ❤️ If this component has been useful to you or your team, please consider becoming a sponsor  

Your support helps me:

• Keep the project actively maintained with timely bug fixes and security updates
• Add new features, improve performance, and refine the developer experience
• Expand test coverage and documentation for smoother adoption
• Ensure long‑term sustainability without relying on ad hoc free time
• Prioritize community requests and roadmap items that matter most

Open source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.

Your help truly matters.

💚 Become a sponsor today and help me keep this project reliable, up‑to‑date, and growing for everyone.