Iso Steps
An isometric staircase of raised step blocks with labels and icons; completed steps in ink, the current one lifted and lit in ember, future ones outlined; click or arrow keys to move.
Preview
Step 3 of 5: Build
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | IsoStep[] | — | Steps in order: { id, label, icon? }; icons are 24-grid SVG children. |
| current | number | — | Current step index (controlled). |
| defaultCurrent | number | 0 | Starting step (uncontrolled). |
| onCurrentChange | (index: number) => void | — | Called when a step is chosen by click or keyboard. |
| label | string | "Progress" | Accessible name of the steps list. |
| size | number | 36 | Half the width of a block's top face, in px. |
| rise | number | 20 | Extra height each step adds, in px. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.