āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/aceternity/components/compare ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
A comparison component between two images, slide or drag to compare
card, features, special
Run the following command:
npx shadcn@latest add @aceternity/compare @aceternity/sparkles
| Prop | Type | Description | Default Value |
| :--- | :--- | :--- | :--- |
| 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 |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā