Card Stack
Auto-rotating stack of cards that cycle through content with smooth transitions.
Preview
Card Stack
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Testimonials and rotating feature highlights.
Why this component matters
A card stack shows multiple pieces of content in the space of one, maximizing information density.
Usage guidance
Use for testimonials or feature lists where each item deserves equal weight. Set auto-rotate to 5-8 seconds. Max 5 cards in the stack.
Installation
bash
npx shadcn@latest add @aceternity/card-stackUsage
example.tsxtsx
import { CardStack } from "@/components/ui/card-stack";
export default function Example() {
return (
<CardStack>
{/* Your content here */}
</CardStack>
);
}Source
card-stack.tsx
components/ui/card-stack.tsx