@gfazioli/mantine-compare

Mantine Compare is a responsive side‑by‑side comparison container that lets you render two pieces of content (images or custom React nodes) with consistent styling, layout controls, and accessibility.

Version

v0.4.5

Changelog

View the Changelog

Source

View source code

Package

@gfazioli/mantine-compare

Mantine Extensions

Docs

Edit this page

Built by

Giovambattista Fazioli (@gfazioli)

License

MIT

Support

Become a sponsor

Installation

yarn add @gfazioli/mantine-compare

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

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

You can import styles within a layer @layer mantine-compare by importing @gfazioli/mantine-compare/styles.layer.css file.

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

Usage

The Compare is interactive component that allows you to compare two content sections by dragging a slider. It is particularly useful for visualizing differences between two versions of data.

Before (leftSection)

After (rightSection)

Variant

Drag

Hover

Fixed

Radius

Angle

Aspect ratio

import { Compare } from "@gfazioli/mantine-compare";
import { data } from './data';

function Demo() {
    return (
    <Compare
      leftSection={
        <Box
          style={{
            background: 'linear-gradient(45deg, #667eea 0%, #764ba2 100%)',
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text size="xl" c="white" fw={700}>
            Before
          </Text>
        </Box>
      }
      rightSection={
        <Box
          style={{
            background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text size="xl" c="white" fw={700}>
            After
          </Text>
        </Box>
      }
    />
  );
}

With Image Content

You can use the Compare component to compare two images by passing Image components as the leftSection and rightSection props.

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' }}
        />
      }
    />
  );
}

Angle

Use angle to control the divider orientation.

angle={0} behaves like the previous vertical direction (left/right compare)
angle={90} behaves like the previous horizontal direction (top/bottom compare)
Any value between 0 and 360 creates an oblique (diagonal) divider

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

function Demo() {
  return (
    <Compare
      angle={90}
      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' }}
        />
      }
    />
  );
}

Diagonal angle

Set angle to any value between 0 and 360 to get an oblique divider.

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

function Demo() {
  return (
    <Compare
      angle={30}
      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' }}
        />
      }
    />
  );
}

Variants

The Compare component supports three interaction variants:

Drag variant (default)

The default variant="drag" allows users to click and drag the slider button to compare content.

Hover variant

Set variant="hover" to reveal content by moving the mouse over the component. The slider button is hidden in this variant.

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

function Demo() {
  return (
    <Compare
      variant="hover"
      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' }}
        />
      }
    />
  );
}

Fixed variant

Set variant="fixed" to display a static comparison at a specific position. The slider button is hidden and users cannot interact with the slider. Use defaultPosition to control the split position.

Before

After

import { Compare } from '@gfazioli/mantine-compare';
import { Box, Text } from '@mantine/core';

function Demo() {
  return (
    <Compare
      variant="fixed"
      defaultPosition={35}
      leftSection={
        <Box
          style={{
            background: 'linear-gradient(45deg, #667eea 0%, #764ba2 100%)',
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text size="xl" c="white" fw={700}>
            Before
          </Text>
        </Box>
      }
      rightSection={
        <Box
          style={{
            background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text size="xl" c="white" fw={700}>
            After
          </Text>
        </Box>
      }
    />
  );
}

Styles API

Compare supports Styles API, you can add styles to any inner element of the component with classNames prop. Follow Styles API documentation to learn more.

You can customize the appearance of the Compare component using the Styles API. This allows you to modify styles for various parts of the component, such as the slider, sections, and container.

Before

After

Component Styles API

Hover over selectors to highlight corresponding elements

/*
 * Hover over selectors to apply outline styles
 *
 */

Mantine Compare

@gfazioli/mantine-compare

Installation

Usage

With Image Content

Angle

Diagonal angle

Variants

Drag variant (default)

Hover variant

Fixed variant

Styles API

HIGHLIGHTS

RESOURCES

ECOSYSTEM