# Image compare

> Before and after slider with drag, hover and keyboard control.

Component · Pro · https://lodeui.com/components/image-compare

## When to use

- Before / after: photo edits, redesigns, filters, upscaling.

## When not to use

- Images of different sizes or framing: the comparison misleads.

## Installation

```bash
npx shadcn@latest add @lode/image-compare
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ImageCompare } from "@/components/ui/image-compare";

<ImageCompare before="/raw.jpg" after="/graded.jpg" beforeLabel="Raw" afterLabel="Graded" />
```

## API reference

### ImageCompare

Two layers with a draggable divider; the after layer is clipped.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| before / after | `string \| ReactNode` | – | Image URLs or any elements. |
| beforeLabel / afterLabel | `string` | `"Before" / "After"` | Corner labels and image alt text. |
| defaultPosition | `number` | `50` | Starting split, 0–100. |
| aspectRatio | `string` | `"16 / 10"` | CSS aspect ratio. |
| hover | `boolean` | `false` | Follow the mouse without dragging. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Move the divider 2% |
| Shift + ← / → | Move 10% |
| Home / End | All before or all after |

## Accessibility

- The handle is a slider with the split as its value.
- Labels double as alt text for URL images.

## Motion

- The divider follows a spring for a smooth, weighted feel; the handle grows while dragging.

## Responsive behavior

- Fills its container at the given ratio; touch drags work.

## Performance

- A clip-path on one layer; no image redraws.

## Notes for AI

- Use images with identical dimensions and framing.

## Related

- [Carousel](https://lodeui.com/components/carousel) — Swipeable slides with arrows, animated dots, keys and pausable autoplay.
- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.
- [Resizable panels](https://lodeui.com/components/resizable-panels) — Panels with draggable, keyboard-resizable dividers and double-click reset.