Image Compare

Before/after comparison with a draggable divider. The divider is a real slider (arrow keys, Home/End).

Import

import { ImageCompare } from '@marbleui/ui'

Props

<ImageCompare>

Prop	Type	Default
after *required	`{ src: string; alt: string; }`	`—`
before *required	`{ src: string; alt: string; }`	`—`
afterLabel	`string`	`'After'`
beforeLabel	`string`	`'Before'`
className	`string`	`—`
defaultValue	`number`	`50`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Slider · React Aria SliderThumb · React Aria SliderTrack. Follow the primitive's docs for the full keyboard map.

Usage notes

Before/after comparison of two images with a draggable divider, for photo edits, filters or redesigns.

<ImageCompare
  before={{ src: '/retouch/portrait-raw.jpg', alt: 'Portrait before retouching' }}
  after={{ src: '/retouch/portrait-final.jpg', alt: 'Portrait after retouching' }}
  defaultValue={40}
/>

The divider is a React Aria slider labelled “Before / After divider”: arrow keys move it and Home/End jump to the edges. beforeLabel and afterLabel change both the visible tags and that label.
defaultValue is the divider position in percent (0–100, default 50). It’s uncontrolled; there’s no value or change callback.
Use two images with the same aspect ratio. The after image sets the size, and before is cropped to fit it.

Example source · show

import { demoImage } from '../lib/demo-images'
import { ImageCompare } from './image-compare'

export const styles = { Default: () => <ImageCompare className="w-[30rem]" before={{ src: demoImage(3, 900, 600, 'Original'), alt: 'Original photo, warm tones' }} after={{ src: demoImage(4, 900, 600, 'Edited'), alt: 'Edited photo, cool tones' }} /> }

Source: packages/ui/src/image-compare/image-compare.tsx

Catalog

Category: media
Priority: Extra
Primitive: composed
React Aria: Slider