Layered Collection
A multi-surface collection with exposed edges and a readable front plane, not a compressed card deck.
- collections
- layers
- collection
- selection
- surfaces
- 01 / threshold
Arrival - 02 / gathering
Commons - 03 / focus
Quiet - 04 / residue
Trace
Usage
usage
import { LayeredCollection } from "@pinky-ui/layouts";
<LayeredCollection items={surfaces} defaultActiveId={surfaces[0].id} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | LayeredCollectionItem[] | — | Small surfaces with labels, metadata and content. |
| overlap | number | 22 | Desktop overlap intent in px; compact layouts remove it. |
| activeId | string | — | Controlled front-plane id. |
Accessibility
- Every plane is a native button with an explicit selected state.
- Arrow, Home and End keys change the front plane.
- Labels and metadata are visible without depth perception.
Performance
- Overlap is ordinary grid flow with bounded transforms.
- No cloned deck or swipe-only interaction is introduced.
Reduced motion
The same multi-surface order remains visible; selection changes z-order without travel.
When to use
- Small material collections, references and related surfaces.
- A composition where adjacency matters as much as the selected item.
When not to use
- Review queues that need one-card-at-a-time dismissal.
- Large catalogs or content that needs strict side-by-side comparison.