Image Compare

New

A before and after slider for photos, redesigns or edits. Drag the handle, click to jump, or use the arrow keys. Works with images or any nodes.

motionlucide-reactutils@soultel/use-reduced-motion-safe

Living room photo, unedited and desaturated

Installation

$ pnpm dlx shadcn@latest add @soultel/image-compare

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/image-compare.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion lucide-react
```
2. Copy the source from the Code tab into components/image-compare.tsx.

Usage

example.tsx13 lines

import { ImageCompare } from "@/components/image-compare"

export function Retouch() {
  return (
    <ImageCompare
      before="/kitchen-before.jpg"
      after="/kitchen-after.jpg"
      beforeAlt="Kitchen before the remodel"
      afterAlt="Kitchen after the remodel"
      className="aspect-[4/3] max-w-2xl"
    />
  )
}

Props

Prop	Type	Default	Description
before / after	string \| ReactNode	-	Image URLs or any two nodes of the same size.
beforeAlt / afterAlt	string	-	Alt text when passing URLs.
beforeLabel / afterLabel	string	"Before" / "After"	Corner labels. They fade as the handle reaches them.
value / defaultValue	number	50	Handle position from 0 to 100, with onValueChange.
orientation	"horizontal" \| "vertical"	"horizontal"	Split direction.
hover	boolean	false	Follow the mouse without pressing.
hint	boolean	true	Nudge the handle once on first view.
beforeClassName / afterClassName	string	-	Classes for each layer, like a CSS filter.