A before/after image comparison slider with a draggable, keyboard-accessible divider that supports horizontal or vertical orientation and an optional hover-follow mode.
import {
ImageCompare,
ImageCompareAfter,
ImageCompareBefore,
ImageCompareHandle,
ImageCompareLabel,
} from "@/components/ui/image-compare";
export default function ImageCompareDemo() {
return (
<div className="grid w-full max-w-2xl gap-2">
<ImageCompare className="aspect-video rounded-lg">
<ImageCompareBefore>
<img
src="https://cdn.21st.dev/assets/localized/dd4604da70cca7d688de41a6e18c20ef3a6b6e6e846c347257ae188af897f5ed.jpg"
alt="Forest lake, original"
className="size-full object-cover grayscale"
/>
</ImageCompareBefore>
<ImageCompareAfter>
<img
src="https://cdn.21st.dev/assets/localized/dd4604da70cca7d688de41a6e18c20ef3a6b6e6e846c347257ae188af897f5ed.jpg"
alt="Forest lake, edited"
className="size-full object-cover"
/>
</ImageCompareAfter>
<ImageCompareLabel side="before">Before</ImageCompareLabel>
<ImageCompareLabel side="after">After</ImageCompareLabel>
<ImageCompareHandle />
</ImageCompare>
</div>
);
}