How do I use Stacked Cards Effect in my project?

Copy the StackedCardsEffect source code from https://opensourceui.in/components/stacked-cards-effect, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use Stacked Cards Effect in a commercial project?

Yes. Opensource UI is MIT licensed. You can use StackedCardsEffect in personal and commercial projects without UI attribution.

Back to Others Components / Others

Stacked Cards Effect

Name: Opensource UI
Author: Bidyut Kundu

Three skewed cards fanned behind a front hero card — hover brings subtle motion. Collection and portfolio layouts with depth, no Three.js required.

Preview

Bidyut Kundu

3 new cards

Your saved design collection with 12 components ready to use.

UICardsNav

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/others/stacked-cards-effect.tsx in your project.
4
Import and render:
Example
import { StackedCardsEffect } from "@/components/others/stacked-cards-effect";
<StackedCardsEffect />

lib/cn.ts

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

components/others/stacked-cards-effect.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import React, { forwardRef } from "react";
import Image from "next/image";
import { cn } from "@/lib/cn";
 
export const StackedCardsEffect = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className = "", ...props }, ref) => (
  <div
    ref={ref}
    className={cn("group relative h-64 w-56 font-sans", className)}
    {...props}
  >
    <div className="absolute inset-x-4 top-8 bottom-0 -rotate-6 rounded-2xl bg-neutral-200 transition-transform duration-500 group-hover:rotate-[-8deg]" />
    <div className="absolute inset-x-2 top-4 bottom-0 rotate-3 rounded-2xl border border-neutral-200 bg-neutral-100 transition-transform duration-500 group-hover:rotate-[5deg]" />
 
    <div className="absolute inset-0 overflow-hidden rounded-2xl border border-neutral-100 bg-white shadow-lg transition-transform duration-500 group-hover:-translate-y-1">
      <div className="relative h-28 overflow-hidden">
        <Image
          src="/background4.webp"
          alt="Card"
          fill
          sizes="288px"
          className="object-cover"
        />
      </div>
      <div className="p-4">
        <div className="mb-2 flex items-center gap-2">
          <div className="relative h-7 w-7 overflow-hidden rounded-full border border-neutral-100">
            <Image
              src="/profile-picture.png"
              alt="User"
              fill
              sizes="28px"
              className="object-cover"
            />
          </div>
          <div>
            <p className="text-xs font-semibold text-neutral-900">
              Bidyut Kundu
            </p>
            <p className="text-[10px] text-neutral-400">3 new cards</p>
          </div>
        </div>
        <p className="text-[11px] leading-relaxed text-neutral-500">
          Your saved design collection with 12 components ready to use.
        </p>
        <div className="mt-3 flex gap-1.5">
          {["UI", "Cards", "Nav"].map((tag) => (
            <span
              key={tag}
              className="rounded-full bg-neutral-100 px-2 py-0.5 text-[9px] font-medium text-neutral-600"
            >
              {tag}
            </span>
          ))}
        </div>
      </div>
    </div>
  </div>
));
StackedCardsEffect.displayName = "StackedCardsEffect";

import React, { forwardRef } from "react"; import Image from "next/image"; import { cn } from "@/lib/cn"; export const StackedCardsEffect = forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> >(({ className = "", ...props }, ref) => ( <div ref={ref} className={cn("group relative h-64 w-56 font-sans", className)} {...props} > <div className="absolute inset-x-4 top-8 bottom-0 -rotate-6 rounded-2xl bg-neutral-200 transition-transform duration-500 group-hover:rotate-[-8deg]" /> <div className="absolute inset-x-2 top-4 bottom-0 rotate-3 rounded-2xl border border-neutral-200 bg-neutral-100 transition-transform duration-500 group-hover:rotate-[5deg]" /> <div className="absolute inset-0 overflow-hidden rounded-2xl border border-neutral-100 bg-white shadow-lg transition-transform duration-500 group-hover:-translate-y-1"> <div className="relative h-28 overflow-hidden"> <Image src="/background4.webp" alt="Card" fill sizes="288px" className="object-cover" /> </div> <div className="p-4"> <div className="mb-2 flex items-center gap-2"> <div className="relative h-7 w-7 overflow-hidden rounded-full border border-neutral-100"> <Image src="/profile-picture.png" alt="User" fill sizes="28px" className="object-cover" /> </div> <div> <p className="text-xs font-semibold text-neutral-900"> Bidyut Kundu </p> <p className="text-[10px] text-neutral-400">3 new cards</p> </div> </div> <p className="text-[11px] leading-relaxed text-neutral-500"> Your saved design collection with 12 components ready to use. </p> <div className="mt-3 flex gap-1.5"> {["UI", "Cards", "Nav"].map((tag) => ( <span key={tag} className="rounded-full bg-neutral-100 px-2 py-0.5 text-[9px] font-medium text-neutral-600" > {tag} </span> ))} </div> </div> </div> </div> )); StackedCardsEffect.displayName = "StackedCardsEffect";