Compare
Before/after image comparison slider with draggable divider.
Preview
Compare
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Design showcases and product transformation demos.
Why this component matters
The comparison slider lets users discover the difference themselves, making the transformation personal.
Usage guidance
Use with two high-quality images of the same subject. The divider should be easily draggable with clear before/after labels.
Installation
bash
npx shadcn@latest add @aceternity/compareUsage
example.tsxtsx
import { Compare } from "@/components/ui/compare";
export default function Example() {
return (
<Compare>
{/* Your content here */}
</Compare>
);
}Source
compare.tsx
components/ui/compare.tsx