Before After

Pro

Comparison slider over two images or views. The divider follows your finger and glows as you drag, glides to wherever you tap, and offers a press-and-hold mode for quick comparing.

Preview

Installation

npx @lumioui/cli add pro/before-after

Usage

import { BeforeAfter } from "@/components/ui/before-after/before-after";
<BeforeAfter />

Examples

Hold to compare

A rental host's listing-photo enhancer in teal.

Photo edit

A photo editor's compare view, in ink.

Vertical restore

A photo-restoration app, amber.

API reference

Prop Type Default
before* Layer

The original — an image source or any element (rendered full-bleed).

 —
after* Layer

The result — an image source or any element (rendered full-bleed).

 —
value number

Controlled divider position, 0 (all after) – 1 (all before).

 —
defaultValue number

Uncontrolled initial position. Default 0.5.

 0.5
onValueChange (value: number) => void

Fires with the settled position when the finger lifts (or a tap lands).

 —
onSlidingStart () => void

Fires when a drag starts — e.g. hide surrounding chrome.

 —
orientation "horizontal" | "vertical"

horizontal (default) — divider is vertical, before on the left. vertical — divider is horizontal, before on top.

 "horizontal"
mode "slide" | "hold"

slide (default) — draggable divider. hold — shows after; press and hold anywhere to see before (the photo-editor idiom).

 "slide"
beforeLabel string | false

Corner label for the before layer. false hides it. Default "Before".

 "Before"
afterLabel string | false

Corner label for the after layer. false hides it. Default "After".

 "After"
aspectRatio number

Width / height. Default 4/5.

 4 / 5
rounded
"none" | "md" +2 "none" | "md" | "lg" | "xl"

Corner radius. Default lg (16pt).

 "lg"
disabled boolean —
accessibilityLabel string

Screen-reader name. Default "Before and after comparison".

 "Before and after comparison"
className string —