Apple Cards Carousel
A sleek and minimal carousel implementation, as seen on apple.com
Get to know your iSad.
Installation
Run the following command
npx shadcn@latest add @aceternity/apple-cards-carouselAdd useOutsideClick hook
import React, { useEffect } from "react";
export const useOutsideClick = (
ref: React.RefObject<HTMLDivElement>,
callback: Function
) => {
useEffect(() => {
const listener = (event: any) => {
if (!ref.current || ref.current.contains(event.target)) {
return;
}
callback(event);
};
document.addEventListener("mousedown", listener);
document.addEventListener("touchstart", listener);
return () => {
document.removeEventListener("mousedown", listener);
document.removeEventListener("touchstart", listener);
};
}, [ref, callback]);
};Examples
Standard
Get to know your iSad.
With Layout Changes
Get to know your iSad.
Props
Carousel Component
| Prop | Type | Default | Description |
|---|---|---|---|
| items | JSX.Element[] | Required | Array of JSX elements to be displayed in the carousel |
| initialScroll | number | 0 | Initial scroll position of the carousel |
Card Component
| Prop | Type | Default | Description |
|---|---|---|---|
| card | Card | Required | Object containing card details (src, title, category, content) |
| index | number | Required | Index of the card in the carousel |
| layout | boolean | false | Whether to use layout animations |
BlurImage Component
| Prop | Type | Default | Description |
|---|---|---|---|
| height | number | string | - | Height of the image |
| width | number | string | - | Width of the image |
| src | string | Required | Source URL of the image |
| className | string | - | Additional CSS classes for the image |
| alt | string | "Background of a beautiful view" | Alt text for the image |
| ...rest | ImageProps | - | Any other props accepted by Next.js Image component |
Note: The Card type is defined as:
type Card = {
src: string;
title: string;
category: string;
content: React.ReactNode;
};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
