Before and after slider. Drag the handle or use the arrow keys to reveal either side.
npx shadcn@latest add https://hyperblur.dev/r/image-compare.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/image-compare.tsx.
import { ImageCompare } from "@/components/hyperblur/image-compare"
<ImageCompare before={<img src="/a.jpg" alt="Before" />} after={<img src="/b.jpg" alt="After" />} />| Prop | Type | Default | Description |
|---|---|---|---|
| before | ReactNode | required | Bottom layer, shown on the left (or top). An image or any element. |
| after | ReactNode | required | Top layer, clipped by the handle and shown on the right (or bottom). |
| initial | number | 50 | Starting handle position from 0 to 100. |
| labels | { before: string; after: string } | { before: "Before", after: "After" } | Text of the corner chips. An empty string hides that chip. |
| orientation | "horizontal" | "vertical" | "horizontal" | Direction of the split. Vertical moves the handle up and down. |