Image Compare

An interactive, responsive image comparison slider component featuring 10 distinct visual comparison modes, fluid touch/mouse drag physics, custom label badges, and dynamic site theme color binding.

ImageCompare allows users to seamlessly compare before-and-after visual states for photo editing, design variations, AI enhancements, or product upgrades.

Classic Slider

beforeImage: and afterImage are the two URLs; beforeLabel and afterLabel caption them.
variant"classic-slider": is the default — a horizontal handle with dual arrows and drag physics.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Image Compare

npx shadcn@latest add @algorize-ui/image-compare

components/custom/blocks/ImageCompareBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Image Compare needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Split Handle

Usevariant"split-handle": for a pill badge handle carrying high-contrast action text.

Glowing Divider

Usevariant"glowing-divider": for a continuous ambient glow along the split edge.

Badge Overlay Percentage

Usevariant"badge-overlay": to float a pill showing the drag position as a percentage.

Minimalist Thin Line

Usevariant"minimal-line": for an ultra-thin divider with a small centred dot handle.

Hover Pointer Reveal

Usevariant"hover-reveal": to follow the pointer directly — no click-and-drag needed.

Vertical Slide Compare

Usevariant"vertical-slide": to split top-to-bottom instead, for height-focused comparisons.

Circular Magnifier Lens

Usevariant"circle-magnifier": for a circular scope that clips the after image to a lens.

Glassmorphic Handle

Usevariant"glass-handle": for a translucent backdrop-blur pill with layer icons.

Diagonal Diamond Split

Usevariant"diagonal-split": for a 45-degree split with a diamond crosshair handle.

Features

10 Unique Interaction Variants

Includes classic sliders, split badges, glowing lines, hover reveals, vertical slides, and circular lens scopes.

100% Theme Color Engine

Integrates with site primary CSS variable var(--primary) or explicit color swatches.

Touch & Gesture Responsive

Smooth dragging for mobile touch screens, trackpads, and mouse pointers.

Custom Labels & Images

Pass custom Before/After labels and image URLs through flexible props.

Best Practices & Guidelines

When to Use

Use ImageCompare to showcase photo retouching, AI enhancement models, design redrafts, dark mode vs light mode UI previews, or product quality upgrades.

Props Reference

Prop	Type	Default	Description
`variant`	`"classic-slider" \| "split-handle" \| "glowing-divider" \| "badge-overlay" \| "minimal-line" \| "hover-reveal" \| "vertical-slide" \| "circle-magnifier" \| "glass-handle" \| "diagonal-split"`	`"classic-slider"`	Selects the image comparison interaction mode and handle style.
`beforeImage`	`string`	`Unsplash Preset`	URL of the base before image displayed on the left/top.
`afterImage`	`string`	`Unsplash Preset`	URL of the enhanced after image revealed by dragging.
`beforeLabel`	`string`	`"Original"`	Label badge text for the before state image.
`afterLabel`	`string`	`"Enhanced"`	Label badge text for the after state image.
`initialPosition`	`number`	`50`	Starting percentage position of the slider handle (0 - 100).
`color`	`ImageCompareColor \| string`	`"primary"`	Applies dynamic theme color palettes (`"primary" \| "indigo" \| "rose" \| "emerald" \| "zinc"` or custom hex).
`className`	`string`	`""`	Custom Tailwind CSS classes applied to the root container.