Image Compare | Bearnie

<ImageCompare
  before="/images/docs/landscape-bw.jpg"
  after="/images/docs/landscape.jpg"
  beforeAlt="Landscape in black and white"
  afterAlt="Landscape in color"
/>

Installation

npx bearnie add image-compare

Usage

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

<ImageCompare before="/before.jpg" after="/after.jpg" />

Drag anywhere on the image (or the handle) to move the divider. The handle is a role="slider" button: arrow keys nudge it, Shift-arrow moves in bigger steps, Home/End jump to the edges. Use two images with the same dimensions.

Examples

Starting position

defaultPosition sets where the divider starts, 0–100.

<ImageCompare
  before="/images/docs/landscape-bw.jpg"
  after="/images/docs/landscape.jpg"
  defaultPosition={25}
/>

Props

Prop	Type	Default	Description
before	string	-	Image shown on the left of the handle
after	string	-	Image shown on the right of the handle
beforeAlt / afterAlt	string	“Before” / “After”	Alt text for each image
defaultPosition	number	50	Initial divider position, 0–100
class	string	-	Additional CSS classes

Accessibility

The handle is a role="slider" button with aria-valuenow kept in sync while dragging.
Keyboard: ArrowLeft/ArrowRight move by 2, Shift-arrow by 10, Home/End jump to either edge.