Card Stack

Three square-edged cards with fine borders and layers stacked behind the front card. Select an exposed top edge to bring that card to the front.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/card-stack.json

Usage

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

<CardStack />

<CardStack items={[
  { id: "first", src: "/1.png", alt: "Glowing butterflies", title: "Wings of light", description: "A different perspective." },
  { id: "second", src: "/2.png", alt: "Swirling white light", title: "Into the orbit" },
]} />

Props

• items: Up to three visible layers with unique id and title, plus optional description, src, alt, or children. The selected card displays its content; the remaining cards form selectable background layers. An empty array renders nothing.
• label: Accessible name for the stack. Defaults to "Card stack".
• className: Additional classes on the wrapper. Defaults to full width with a 672px maximum.

Setup notes

Uses the existing Card component and shared typography. The background layers sit 20px apart vertically and become 5% narrower with each layer, centered behind the front card. The wrapper reserves space above for both layers. Each card has a top-edge button with an accessible name and pressed state. Click or tap an exposed edge, or focus its button and press Enter or Space, to select it. Motion springs animate the selected card into place and fade in its content. Reduced motion makes selection immediate.