Image Compare
A draggable before/after slider with clip-path reveal, keyboard support, and a pulsing handle hint.
Vertical
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/image-compare.json"Usage
tsx
import { ImageCompare } from "@godui/components";
<ImageCompare
before={<img src="/before.jpg" alt="Before" />}
after={<img src="/after.jpg" alt="After" />}
/>;Drag the handle, or focus it and use the arrow keys (hold Shift for larger steps).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
before | ReactNode | — | Content revealed on the left/top. |
after | ReactNode | — | Base content underneath. |
initial | number | 50 | Starting handle position (0–100). |
orientation | "horizontal" | "vertical" | "horizontal" | Drag axis. |
beforeLabel | string | — | Badge over the before layer. |
afterLabel | string | — | Badge over the after layer. |
onChange | (position: number) => void | — | Fires as the handle moves. |