Image compare

Storybook

Before and after, behind one divider

Two images share a frame and a draggable split. Drag anywhere, or put focus on the handle and use the arrow keys. The pair below is one composition drawn once for daylight and once for dusk.

Default

Demo cover illustration, dusk version
Demo cover illustration, daylight version

Start position

Demo cover illustration, dusk version
Demo cover illustration, daylight version

Without labels

Demo cover illustration, dusk version
Demo cover illustration, daylight version
tsx
// From the npm package
import { ImageCompare } from 'rift-ds/components/ImageCompare/ImageCompare';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/image-compare.json