The best React before/after image comparison slider libraries of 2025
Before/after sliders are interactive UI components that allow users to compare two different states of an image or any other content side by side. They are particularly useful for showcasing the impact of edits, transformations, or changes over time.
The React ecosystem offers a few libraries that simplify the implementation of these components. Choosing the right library depends on your specific requirements, such as customization needs, performance considerations, and bundle size. .
React before/after comparison slider libraries
Here’s an overview of some libraries ordered from the most to the least used, based on GitHub stars and npm weekly downloads in March 2025.
| Library | Repository | Package | GitHub stars | npm downloads |
|---|---|---|---|---|
| react-compare-slider | GitHub | npm | 281 | 44.4k |
| react-before-after-slider-component | GitHub | npm | 44 | 2.9k |
| img-comparison-slider | GitHub | npm | 720 | 27.4k |
| react-compare-image | GitHub | npm | 353 | 8.3k |
Croct helps product teams scale experimentation and personalization without over-relying on developers.
react-compare-slider
| Website | Repository | Package | GitHub stars | Contributors | Projects | npm downloads |
|---|---|---|---|---|---|---|
| 🔗 Link | 🔗 Link | 🔗 Link | 281 | 7 | 2.8k | 44.4k |
React Compare Slider is a versatile React component that enables users to compare two images or sections of content using a draggable slider. Besides using zero dependencies, it supports responsive images and any other React components (picture, video, canvas, iframe, etc.), offers customization options for styling and behavior, and is accessible with screen reader and keyboard support
react-before-after-slider-component
React Before After Slider Component is a lightweight React component that focuses on simplicity and ease of integration. The delimiter is customizable, allowing changes to its color and style. It also offers resize handling and includes callbacks for when the slider is ready, visible, and when the delimiter position changes.
img-comparison-slider
| Website | Repository | Package | GitHub stars | Contributors | Projects | npm downloads |
|---|---|---|---|---|---|---|
| 🔗 Link | 🔗 Link | 🔗 Link | 720 | 11 | 847 | 27.4k |
Img Comparison Slider is a lightweight React component for creating before/after image comparison sliders. It's designed for easy integration and offers basic customization options. It provides the necessary features to compare images without overcomplicating, making it a straightforward choice for simple applications.
react-compare-image
React Compare Image is a simple, responsive React component for comparing two images using a slider. It stands out due to its ease of use and flexibility in orientation. It adapts to the parent container's width and supports both horizontal and vertical orientations for image comparison. The handle is customizable, allowing for flexibility in styling.
How to choose?
Choosing the right library depends on your specific needs and preferences. Key factors to consider include customization options, bundle size, dependencies, and ease of use.
If you need to heavily customize the appearance and behavior of the slider, look for libraries that offer extensive styling and behavior customization. Additionally, consider the impact on your application's bundle size and whether you prefer a library with minimal dependencies.
Happy coding!