Components
Loading preview...
A comparison component between two images, slide or drag to compare
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/compareimport React from "react";
import { Compare } from "@/components/ui/compare";
export function CompareDemo() {
return (
<div className="p-4 border rounded-3xl dark:bg-neutral-900 bg-neutral-100 border-neutral-200 dark:border-neutral-800 px-4">
<Compare
firstImage="https://assets.aceternity.com/code-problem.png"
secondImage="https://assets.aceternity.com/code-solution.png"
firstImageClassName="object-cover object-left-top"
secondImageClassname="object-cover object-left-top"
className="h-[250px] w-[200px] md:h-[500px] md:w-[500px]"
slideMode="hover"
/>
</div>
);
}