Free Stacked Cards Component for React — Cards Stack Animation

What Is a Cards Stack Component?

A cards stack component is a UI pattern where multiple cards are layered on top of one another with a slight offset — creating the visual impression of a physical deck. When animated, each card fans out, flips away, or slides off the stack to reveal the card beneath, delivering a satisfying interaction that keeps users engaged longer than a static grid.

This pattern is everywhere in modern product UIs: onboarding flows, pricing comparisons, portfolio showcases, and swipeable testimonial decks all rely on stacked card animations. Getting the depth, timing, and easing right manually is tedious, which is why a ready-made component saves hours of work.

Empire UI ships a production-ready Stacked Cards component that works out of the box with React 18+ and Tailwind CSS. It is completely free, open-source, and styled to match any of the 40 visual styles available in the library — from glassmorphism to neobrutalism.

Getting Started — Installation

Before dropping the component into your project, make sure you have the Empire UI package installed. If you are starting fresh, the fastest path is the CLI scaffolder available on the tools page.

npm install empire-ui
# or
pnpm add empire-ui

Once installed, import the CardsStack component and pass it an array of card data objects. Each object can carry any content — images, headings, descriptions, CTAs — and the component handles the layering and animation automatically.

import { CardsStack } from 'empire-ui';

const cards = [
  { id: 1, title: 'Glassmorphism', bg: 'bg-white/10 backdrop-blur-md', body: 'Frosted glass aesthetics for modern dashboards.' },
  { id: 2, title: 'Neumorphism', bg: 'bg-slate-100', body: 'Soft UI with extruded surfaces and inner shadows.' },
  { id: 3, title: 'Neobrutalism', bg: 'bg-yellow-300', body: 'Bold borders and raw typographic energy.' },
];

export default function Demo() {
  return (
    <CardsStack
      cards={cards}
      offsetY={12}
      offsetX={4}
      animationDuration={400}
      onCardDismiss={(card) => console.log('Dismissed:', card.title)}
    />
  );
}

The offsetY and offsetX props control how far each card peeks out beneath the one above it. Increase these values for a more pronounced stack depth, or reduce them for a tighter deck that subtly hints at depth without dominating the layout.

Animation Variants and Customisation

Empire UI's cards stack ships with four built-in animation variants: swipe-left, swipe-right, flip, and fade. You select the variant per interaction or set a global default through the dismissVariant prop. Each variant is driven by CSS transforms and requestAnimationFrame — no heavy animation libraries required.

<CardsStack
  cards={cards}
  dismissVariant="flip"
  stackDepth={3}
  scaleStep={0.04}
  rotationRange={[-6, 6]}
/>

The scaleStep prop applies a progressive CSS scale() transform to each card beneath the top one, reinforcing the physical depth illusion. rotationRange adds a randomised tilt to each card in degrees — set it to [0, 0] if you prefer a perfectly aligned stack.

All styles are Tailwind utility classes, so overriding the look is as simple as passing a className prop. You can pair the cards stack with Empire UI's custom cursors to create an interactive card-flipping experience where the cursor itself transforms on hover — a detail that elevates perceived quality dramatically.

Stacked Cards in Real-World Layouts

The cards stack pattern shines in testimonial sections, where you want to show social proof without a cluttered carousel. Drop three or four testimonial cards into a CardsStack, set autoPlay to true, and the component cycles through them automatically — each card sliding away to reveal the next after a configurable delay.

For pricing pages, a stacked layout lets visitors compare plans by tapping through the deck rather than scrolling a wide three-column table. Pair this with one of the industry templates — SaaS, Agency, or E-commerce — where the component is already wired up with mock data you can replace in minutes.

If you are building an onboarding flow, the cards stack doubles as a step-by-step wizard. Track the active index in local state, update it on each dismiss callback, and render a progress indicator beneath the stack. The component's controlled mode (activeIndex + onActiveIndexChange) makes this pattern trivial to implement.

Explore the MCP server if you want to generate a fully themed cards stack component via an AI prompt inside Cursor or VS Code Copilot Chat. The MCP tool returns ready-to-paste TSX that matches the visual style you specify — glassmorphism, claymorphism, whatever fits your project.

Accessibility and Performance

Animated UI components are often accessibility afterthoughts, but Empire UI's cards stack is built with ARIA live regions and keyboard navigation from the start. Users can dismiss the top card with the ArrowLeft, ArrowRight, or Space keys, and a aria-live="polite" region announces the newly revealed card title to screen readers.

The component respects prefers-reduced-motion. When the user has enabled reduced motion at the OS level, all transform animations are replaced with an instant crossfade, preserving the semantic interaction without the vestibular risk.

On the performance side, each card is rendered as its own will-change: transform layer, which keeps animations on the GPU compositor thread and avoids layout thrashing. The stack only renders stackDepth + 1 cards at any time — the rest stay unmounted — so even a dataset of 500 cards has a constant, negligible DOM footprint.

For a deeper look at how Empire UI handles motion across its entire component suite, visit the blog where we publish detailed animation engineering breakdowns and style guides.

Combining Stacked Cards with Other Empire UI Components

The cards stack pairs naturally with Empire UI's Animated Tabs to create a categorised card browser: tabs at the top filter the dataset, and the stack below animates between filtered subsets. Because both components share the same Tailwind token system, they inherit your global colour palette with zero extra configuration.

Adding a spotlight effect behind the stack creates a dramatic focal point on landing pages — the light follows the cursor and the cards cast subtle soft shadows, making the stack feel genuinely three-dimensional. Check out the spotlight effect guide for implementation details.

If your project already uses a bento grid layout, you can embed a miniature cards stack inside one of the bento cells. The component accepts a compact prop that reduces padding, font sizes, and offset values proportionally, so it fits comfortably in constrained grid cells without breaking the overall rhythm.

Empire UI is the only free React library that combines this depth of animation tooling with 40 cohesive visual styles, an AI-native MCP server, and zero licensing cost. Clone the repo, star it, and start building.

FAQ

Read next