{"schemaVersion":"1.0","type":"Article","slug":"mantine-compare-a-sleek-accessible-way-to-showcase-before-after-in-react-pd438","url":"https://api.zyvop.com/mantine-compare-a-sleek-accessible-way-to-showcase-before-after-in-react-pd438","title":"Mantine Compare: A Sleek, Accessible Way to Showcase Before/After in React","subtitle":null,"tldr":"Mantine Compare brings polished, responsive side‑by‑side comparisons to your Next.js + TypeScript...","keywords":["Programming","reactjsdevelopment","TypeScript","webcomponents"],"entities":["Giovambattista Fazioli","Senior Full-stack Engineer, Lead Developer","Programming","reactjsdevelopment","TypeScript","webcomponents","ZyVOP"],"keyTakeaways":["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."],"headings":["Why Mantine Compare stands out ","Key highlights:","Use cases that shine ","Need a horizontal or diagonal split? Set the angle:","Prefer non‑interactive reveals? Choose a variant:","Styling with precision ","Built for modern Mantine workflows ","Where to explore more ","Final thoughts "],"outboundLinks":["https://gfazioli.github.io/mantine-compare","https://mantine.dev/getting-started/","https://mantine-extensions.vercel.app/","https://mantine.dev/getting-started/%C2%A0%E2%86%97","https://mantine-extensions.vercel.app/%C2%A0%E2%86%97"],"contentText":"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. 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 followingimport '@gfazioli/mantine-compare/styles.css';// or, with CSS layersimport '@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. 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  Mantine UI Library: https://mantine.dev/getting-started/ ↗ Mantine Extensions HUB: https://mantine-extensions.vercel.app/ ↗ 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.","contentHash":"sha256:b2ec30fe3945c0fa40e68bd216bdbb01f3875b6e5f8b5a6156de22da87d45d70","authorName":"Giovambattista Fazioli","authorUrl":"https://api.zyvop.com/author/giovambattista","authorSameAs":["https://gfazioli.github.io","https://github.com/gfazioli","https://x.com/gfazioli","https://www.linkedin.com/in/giovambattistafazioli/"],"category":null,"tags":["Programming","reactjsdevelopment","TypeScript","webcomponents"],"audience":"Readers researching Programming","tone":"Professional, senior full-stack engineer, lead developer perspective","readingTimeMinutes":4,"wordCount":778,"faqs":null,"primaryTopic":"Programming","publishedAt":"2026-09-04T09:15:29.578Z","updatedAt":"2026-09-04T09:15:29.578Z","canonicalUrl":"https://dev.to/undolog/mantine-compare-a-sleek-accessible-way-to-showcase-beforeafter-in-react-229m"}