Image Comparison

Before/after slider with a draggable handle that works on touch and mouse.

WWren Micro·byWAWren Ashby

1,980

Bookmarks

5,100

Installs

47,300

Views

29 lines

import { ImageComparison } from "@/components/ui/image-comparison"

export default function DemoImageComparison() {
  return (
    <div className="flex min-h-[360px] items-center justify-center p-8">
      <ImageComparison
        className="aspect-[16/9] w-full max-w-2xl"
        beforeLabel="Draft"
        afterLabel="Shipped"