Layered Cards
A frontal three-quarter stack of UI layers that spread apart in depth on hover or focus, with glassy upper layers, labels and keyboard selection.
Preview
Menu · Popovers and menus float above content.
Held spread
Panels · Cards and panels group related content.
Hover or focus to spread; arrow keys move between layers.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| layers | CardLayer[] | — | Layers, front first: { id, label, description?, content }. |
| label | string | — | Accessible name of the stack. |
| width | number | 300 | Card width in px; height is 0.62 times the width. |
| gap | number | 16 | Space between layers when together, in px. |
| spreadGap | number | 72 | Space between layers when spread, in px. |
| spread | boolean | — | Hold the stack spread (true) or together (false). Omit to spread on hover and focus. |
| value | string | — | Selected layer id (controlled). |
| defaultValue | string | first layer | Initially selected layer id. |
| onValueChange | (id: string) => void | — | Called when a layer is selected. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.