Components
Loading preview...
Vertical Image Comparison Slider – Interactive before/after viewer. Allows users to compare two images with a draggable vertical handle. Perfect for showcasing edits, retouching, or visual transformations in photography, design, or beauty apps.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/image-comparison-slider-vertical// image-comparison-slider/demos/default/code.demo.tsx
import { ImageComparisonSlider } from "@/components/ui/image-comparison-slider-vertical"; // Adjust the import path
export default function ImageComparisonSliderDemo() {
return (
<div className="w-full max-w-2xl mx-auto">
<div className="aspect-[3/4] rounded-lg border overflow-hidden">
<ImageComparisonSlider
topImage="https://ik.imagekit.io/fpxbgsota/image.png?updatedAt=1753442020302"
bottomImage="https://ik.imagekit.io/fpxbgsota/Firefly%2020250725164243.png?updatedAt=1753441977753"
altTop="A colorful historic building facade"
altBottom="The same building facade in black and white"
/>
</div>
</div>
);
}