Compare
A comparison component between two images, slide or drag to compare
Installation
Run the following command
npx shadcn@latest add @aceternity/compare @aceternity/sparklesExamples
Standard
Autoplay
Drag Mode
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| firstImage | string | "" | URL of the first image |
| secondImage | string | "" | URL of the second image |
| className | string | undefined | Additional CSS classes for the container |
| firstImageClassName | string | undefined | Additional CSS classes for the first image |
| secondImageClassname | string | undefined | Additional CSS classes for the second image |
| initialSliderPercentage | number | 50 | Initial position of the slider (0-100) |
| slideMode | "hover" | "drag" | "hover" | Mode of interaction for the slider |
| showHandlebar | boolean | true | Whether to show the slider handle |
| autoplay | boolean | false | Enable automatic sliding |
| autoplayDuration | number | 5000 | Duration of one autoplay cycle in milliseconds |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
