# Before After

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.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/before-after
```

## Import

```tsx
import { BeforeAfter } from "@/components/ui/before-after/before-after";
```

## Variants

- `hold` — Hold to compare: `npx @lumioui/cli add pro/before-after-hold`
- `photo-edit` — Photo edit: `npx @lumioui/cli add pro/before-after-photo-edit`
- `restore` — Vertical restore: `npx @lumioui/cli add pro/before-after-restore`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `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. |
| `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. |
| `mode?` | `"slide" | "hold"` | `slide` (default) — draggable divider. `hold` — shows `after`;  press and hold anywhere to see `before` (the photo-editor idiom). |
| `beforeLabel?` | `string | false` | Corner label for the before layer. `false` hides it. Default "Before". |
| `afterLabel?` | `string | false` | Corner label for the after layer. `false` hides it. Default "After". |
| `aspectRatio?` | `number` | Width / height. Default 4/5. |
| `rounded?` | `"none" | "md" | "lg" | "xl"` | Corner radius. Default `lg` (16pt). |
| `disabled?` | `boolean` | — |
| `accessibilityLabel?` | `string` | Screen-reader name. Default "Before and after comparison". |
| `className?` | `string` | — |

Source: https://lumioui.com/components/before-after