Image Compare

Before and after slider split by a lit tube. Drag, press, keys or hover to scrub; horizontal or vertical.

Shibuya crossing at night, colour graded

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/image-compare.json

Usage

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

<ImageCompare
  className="aspect-[3/2]"
  beforeLabel="Raw"
  afterLabel="Graded"
  before={<img src="/raw.jpg" alt="" />}
  after={<img src="/graded.jpg" alt="Shibuya at night" />}
/>

Examples

Vertical

Any children work, here a grain overlay drawn in SVG. Labels fade as the divider covers them.

Scrub on hover

With hover, a mouse moves the divider without pressing. Touch still drags.

Controlled

value and onValueChange, with presets driving it from outside.

API reference

Give the root a size or an aspect ratio, or let the after layer set it. Images inside fill and cover their layer.

Prop	Type	Default
`before`	`ReactNode` Shown on the left (or top), up to the divider.	None
`after`	`ReactNode` Shown on the right (or bottom). Its alt text is the one read; leave the before image's alt empty.	None
`beforeLabel`	`ReactNode` Caption on the before side. Strings also name the slider.	None
`afterLabel`	`ReactNode` Caption on the after side.	None
`value`	`number` Controlled divider position, 0 to 100.	None
`defaultValue`	`number` Initial position when uncontrolled.	`50`
`onValueChange`	`(value: number) => void` Called on every move.	None
`onValueCommit`	`(value: number) => void` Called once a drag or key press ends.	None
`orientation`	`"horizontal" \| "vertical"` Vertical splits top from bottom.	`"horizontal"`
`hover`	`boolean` A mouse moves the divider without pressing.	`false`
`step`	`number` Percent per arrow key. Page Up and Page Down move ten steps.	`1`
`disabled`	`boolean` Blocks input and takes the handle out of the tab order.	`false`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited

Accessibility

The handle is a slider with aria-valuetext like "42% Raw, 58% Graded".
Arrows move by step (Right and Down increase in both orientations), Page Up and Page Down by ten steps, Home and End go to the edges.
Horizontal compares keep vertical touch scrolling for the page, and vertical ones keep horizontal.
With reduced motion the divider never glides; it goes straight to the press.