Layered Collection
A multi-surface collection with exposed edges and a readable front plane — not a compressed card deck. Adjacency stays visible even while one item leads.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
- 01 / threshold
Arrival - 02 / gathering
Commons - 03 / focus
Quiet - 04 / residue
Trace
Purpose
A multi-surface collection with exposed edges and a readable front plane — not a compressed card deck. Adjacency stays visible even while one item leads.
Good for
- Small material collections, references and related surfaces
- A composition where adjacency matters as much as the selected item
Avoid for
- Review queues that need one-card-at-a-time dismissal — use Draggable Card Stack
- Large catalogs or content that needs strict side-by-side comparison
How many items
Three to seven surfaces; the exposed edges should still identify every item.
Mobile
Surfaces return to a readable vertical composition with touch-sized selection — no horizontal pile.
Motion intensity
Low. Overlap is ordinary grid flow with bounded transforms; selection changes z-order without travel, so there's nothing to reduce for reduced motion.
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.
Composes with
Card Fan when the pile itself, not a readable front plane, is the point; Layered Editorial for a single authored composition rather than a multi-surface collection.
Source: packages/skills/layouts/layered-collection.md