Stack Card

A single card with 1–3 decorative layers peeking out behind it, fanning wider on hover.

cards
card
effect
stack
depth
hover

Design system audit

3 more saved searches behind this one.

Quick usage

usage

import { StackCard } from "@pinky-ui/components";

<StackCard depth={2}>
  <BasicCard title="Design system audit" />
</StackCard>

Presets

Default

Two layers.

Deep

Three layers, a more pronounced stack.

depth={3}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add stack-card

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
children	ReactNode	—	Required.
depth	1 \| 2 \| 3	2	Number of decorative layers peeking out behind the face card.
radius	"md" \| "lg" \| "xl" \| "2xl"	"xl"	Corner radius from the shape scale.
padded	boolean	true	Inner content padding.
shadow	"neutral" \| "pink"	"neutral"	Shadow token pair.
as	ElementType	"div"	Pass Link from next/link to make the whole card navigable.
href	string	—	Only meaningful when as renders an anchor.
onClick	() => void	—	Makes the card a click target; adds the focus-visible ring automatically.

Accessibility

Same focus-visible rule as Basic Card once onClick/href is present.
The decorative layers are aria-hidden — they carry no content of their own.

Reduced motion

The fan-out on hover is skipped under prefers-reduced-motion: reduce; the layers stay at their rest offset.

When to use

A single piece of content that should visually imply there's more behind it — a saved-searches tile, a folder

When not to use

An actual stack of many distinct cards a user pages through — DraggableCardStack or CardStackBrowse in packages/systems