DEV Community

Cover image for Mantine Compare: A Sleek, Accessible Way to Showcase Before/After in React
Giovambattista Fazioli
Giovambattista Fazioli

Posted on

Mantine Compare: A Sleek, Accessible Way to Showcase Before/After in React

#programming #reactjsdevelopment #typescript #webcomponents

Mantine Compare brings polished, responsive side‑by‑side comparisons to your Next.js + TypeScript projects with zero friction.

If you build product previews, image diff views, A/B demos, or UI changelogs, Mantine Compare is the extension that turns “quick comparison” into a delightful experience. Designed to pair perfectly with the Mantine UI Library, it ships with consistent styling, accessibility, and flexible layout controls—so you can focus on storytelling, not boilerplate.

Mantine Compare

Why Mantine Compare stands out 

Mantine Compare is an interactive container that reveals two content sections—images or custom React nodes—along a movable divider. You get a smooth UI, keyboard‑friendly controls, and a Styles API that lets you tailor every inner element. In practice, this means you can compare two product states, designs, or datasets with just a few lines of code while preserving your brand look and feel.

Key highlights:

  • Angle control for the divider: vertical, horizontal, or diagonal with any angle between 0–360.

  • Three interaction variants: drag (default), hover, and fixed—each suited to different storytelling patterns.

  • Works with any React content: not just images; pass custom components, charts, or annotated boxes.

  • Full Styles API support: style the slider, line, sections, and root with classNames across your theme.

Installation and setup in seconds 

Add the package, then import styles at your app root:

// install
// yarn add @gfazioli/mantine-compare
// or npm i @gfazioli/mantine-compare

// styles: pick one of the following
import '@gfazioli/mantine-compare/styles.css';
// or, with CSS layers
import '@gfazioli/mantine-compare/styles.layer.css';
Enter fullscreen mode Exit fullscreen mode


 

With Mantine and Next.js, this fits right into your App Router structure and theming model. If you’re new to Mantine, start here: the official Getting Started guide. For a broader view of community components, explore the Mantine Extensions HUB.

Use cases that shine 

  • Product “Before/After” reveals: demonstrate upgrades like performance, color correction, or UI polish.

  • Design reviews: compare two versions of a layout, component, or icon set.

  • Data visualizations: show state changes over time with charts or dashboards on either side.

  • Documentation demos: embed in Nextra or MDX pages to make release notes visual and interactive.

A clean API you’ll enjoy using 

The core component accepts two sections—left and right—and renders them inside a resizable frame:

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

export function ProductDiff() {
  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' }}
        />
      }
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

Need a horizontal or diagonal split? Set the angle:

  • angle={0}: classic vertical divider (left/right).
  • angle={90}: horizontal divider (top/bottom).
  • angle={30} (or any 0–360): diagonal for more dynamic reveals. 
<Compare angle={30} leftSection={...} rightSection={...} />
Enter fullscreen mode Exit fullscreen mode

Prefer non‑interactive reveals? Choose a variant:

  • drag (default): click and drag the slider.
  • hover: reveal by moving the cursor; no slider button.
  • fixed: static split at a preset percentage via defaultPosition. 
<Compare variant="fixed" defaultPosition={35} leftSection={...} rightSection={...} />
Enter fullscreen mode Exit fullscreen mode

Styling with precision 

Mantine Compare embraces Mantine’s Styles API, exposing classNames hooks like root, leftSection, rightSection, slider, sliderLine, and sliderButton. This gives you granular control to sync with your theme, support dark mode, and integrate brand motion or colors—without hacking CSS.

Styling

Example targets:

  • root: the container

  • leftSection/rightSection: wrappers for content panes

  • slider/sliderLine: the draggable element and its accent line

  • sliderButton: the clickable area for accessibility and hit target

 Built for modern Mantine workflows 

  • Accessible by default: focus targets and interaction affordances are thoughtfully designed.

  • Responsive: fills parent dimensions and adapts to different aspect ratios.

  • Composable: accepts any React node—Mantine components, charts, or custom containers.

  • TypeScript‑friendly: props and variants are straightforward and IDE‑discoverable.

If you develop with Mantine daily, Mantine Compare feels native—familiar props, predictable styling, and polished UX out of the box.

Where to explore more 

These resources give you everything you need to scaffold, theme, and document your comparisons in production‑ready apps.

Final thoughts 

Mantine Compare turns content comparison into a premium, interactive experience. Whether you’re shipping product showcases, design diffs, or data reveals, it’s a small component that makes a big impression—and it plugs seamlessly into your Next.js + TypeScript + Mantine stack. Install it, style it, and start telling better visual stories today.

Top comments (0)