## Before / After (S—061)

A before/after comparison with a draggable divider; arrows and Page keys move it too.

- URL: https://sundaeui.dev/components/before-after
- Category: 3D & creative · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/before-after.json`
- Tags: compare, image, photo, media, slider, before-after

Drag anywhere to move the divider. The before layer is clipped, not resized, so both images stay aligned.
Pass two images, or one and let the component desaturate it for the before side.

### Usage

```tsx
import { BeforeAfter } from '@/components/sundae/before-after'

<BeforeAfter before={<img src="/raw.jpg" alt="" />} after={<img src="/graded.jpg" alt="Graded photo" />} />
```

### Props

- `after` (`ReactNode`, required): After layer.
- `before` (`ReactNode`, default `after, desaturated`): Before layer.
- `value / defaultValue` (`number`, default `50`): Divider position, %.
- `label` (`string`, default `'Comparison'`): Slider name.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Photo edits, redesigns, renovations, model outputs.

### When not to use

- Images that are not aligned: the comparison only works pixel to pixel.

### Accessibility

- The handle is role="slider" with a percentage value.
- Labels Before and After are visible.
- Reduced motion removes the handle scale.

### Keyboard

- ← / →: Move 1%
- Page Up / Down: Move 10%
- Home / End: All before / all after