Dev Design LibraryOpen the library

Image Compare Components

Dev Design Library indexes 13 image compare components from 10 open-source UI libraries, with the most coming from LocalMode, ReactFrame, Halaska UI, Kinetics and cnblocks. Each one links to its page with the source code, a live preview where available, the library license and the install command. Image compare components belong to the Media group.

Before AfterPixel Perfect · ReactDrag the handle to wipe between two images with a liquid seam.
Before AfterKinetics · HTML/CSSDrag the handle to wipe between layers
Comparator Onecnblocks · SvelteBefore/after image comparison slider block
Image compareArc Library · ReactDrag a divider across two images to see what changed.
Compare SliderUI Lab · ReactDrag the line to see what polish actually changes.
Background Remover BlockLocalMode · ReactRemove an image's background entirely on-device: SegFormer (Xenova/segformer-b0-finetuned-ade-512-512, ~15MB) segments…
Compare SliderVelora UI · ReactBefore/after wipe with a keyboard-accessible divider.
Compare SliderHalaska UI · React
Compare SliderReactFrame · ReactA theme-aware before/after image comparison slider with horizontal or vertical drag direction, keyboard support, and…
CompareAceternity UI · React
Image Enhancer BlockLocalMode · ReactUpscale and restore photos with Swin2SR super-resolution running fully in the browser — a 2x lightweight default…
Dot Image SliderReactFrame · ReactA before/after image reveal, a luminance-mapped halftone dot rendering on one side, the real photo on the other…
Before / After Image ViewerLocalMode · ReactCompare an original image with a transformed result — a two-panel grid with checkerboard transparency (shipped inline)…

Libraries with image compare components

Related categories