Card Stack

The CardStack component is perfect for testimonials, product features, or any series of items you want to present compactly. Users can grab and drag the top card to flick it to the back of the deck. Now fully updated with 4 layout variants to control how the cards stack and fan out.

Live Preview

Performance Note

To ensure buttery-smooth Framer Motion dragging physics, the component automatically clips rendering to only show the top 3 cards in the DOM at any given time, regardless of how many items are passed in the array. This keeps the DOM lightweight.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { CardStack } from "@/components/creative/card-stack";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { CardStack } from "@/components/creative/card-stack";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <CardStack
        items{/* value */}
        offset{10}
        scaleFactor{10}
      />
    </div>
  );
}