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.
Full documentation and API reference available at gfazioli.github.io/mantine-compare
Installation
yarn add @gfazioli/mantine-compareOverview
Compare provides an interactive slider to reveal/hide two overlapping layers:
- Image comparison — before/after slider for images
- Custom content — any React nodes as comparison layers
- Draggable divider with customizable handle
- Vertical and horizontal orientations
- Controlled and uncontrolled position
Last updated on
