Apple Cards Carousel
Apple-style expandable card carousel with rich content reveal on click.
Preview
Apple Cards Carousel
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Feature highlights and content collections with detail views.
Why this component matters
The card-to-detail expansion keeps the user in context while revealing rich content. No page navigation needed.
Usage guidance
Use for 4-8 content items, each with a title, image, and expandable detail section. The expand animation should feel smooth and directional.
Installation
bash
npx shadcn@latest add @aceternity/apple-cards-carouselUsage
example.tsxtsx
import { AppleCardsCarousel } from "@/components/ui/apple-cards-carousel";
export default function Example() {
return (
<AppleCardsCarousel>
{/* Your content here */}
</AppleCardsCarousel>
);
}Source
apple-cards-carousel.tsx
components/ui/apple-cards-carousel.tsx