DocsLayered Stack

Layered Stack

A stack of layered cards that reset and spring out on mouse interactions.

Installation

pnpm dlx shadcn@latest add @componentry/layered-stack

Dependencies: gsap

Usage

API Reference

PropTypeDefault
childrenReactNode

The layered items inside the stack.

—
classNamestring

Additional CSS classes for styling.

—

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousHover TransitionNextLiquid Glass Carousel
Scientific element 0Scientific element 1Scientific element 2Scientific element 3Scientific element 4Scientific element 5Scientific element 6Scientific element 7
import { LayeredStack } from "@/components/ui/layered-stack"
 
const images = [
    "https://images.unsplash.com/photo-1532094349884-543bc11b234d?auto=format&fit=crop&q=80&w=800",
    "https://images.unsplash.com/photo-1507413245164-6160d8298b31?auto=format&fit=crop&q=80&w=800",
    "https://images.unsplash.com/photo-1517976487492-5750f3195933?auto=format&fit=crop&q=80&w=800",
    "https://images.unsplash.com/photo-1581093450021-4a7360e9a6b5?auto=format&fit=crop&q=80&w=800",
    "https://images.unsplash.com/photo-1530026405186-ed1f139313f8?auto=format&fit=crop&q=80&w=800",
    "https://images.unsplash.com/photo-1507668077129-56e32842fceb?auto=format&fit=crop&q=80&w=800",
    "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800",
    "https://images.unsplash.com/photo-1633167606207-d840b5070fc2?auto=format&fit=crop&q=80&w=800",
];
 
export const Demo = () => {
    return (
        <LayeredStack className="w-full max-w-[920px] grid grid-cols-4 gap-4 p-8">
            {images.map((img, i) => (
                <img key={i} src={img} alt={`Scientific element ${i}`} className="object-cover w-full aspect-[250/320] shadow-xl" />
            ))}
        </LayeredStack>
    );
};