Image comparePro
Before and after slider with drag, hover and keyboard control.
RawGraded
When to use
- Before / after: photo edits, redesigns, filters, upscaling.
When not to use
- Images of different sizes or framing: the comparison misleads.
Installation
Usage
Import it from @/components/ui/image-compare after installing.
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 |
|---|---|
| ←or→ | Move the divider 2% |
| Shift + ←or→ | Move 10% |
| HomeorEnd | 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.
This page as Markdown, for assistants and coding agents:
/components/image-compare/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt