Cube Switcher
Tabs that turn a 3D cube of panels on a spring, with drag, hover peek, shaded side faces and a flat crossfade under reduced motion.
Preview
TeamMost picked
$18 / seat / month
- Unlimited projects
- Shared libraries
- 90-day history
- Priority support
Live sync
Edits land everywhere in under 80 ms.
Tabs, arrow keys or drag a cube. Showing Team. The small cube rests on a corner with idleAngle.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| faces | CubeFace[] | — | Faces around the cube: { id, label, content }. 4 make a cube; 3, 5 or 6 a prism. |
| label | string | — | Accessible name of the tab list. |
| value | string | — | Active face id (controlled). |
| defaultValue | string | first face | Initially active face id. |
| onValueChange | (id: string) => void | — | Called when the active face changes. |
| stageClassName | string | — | Classes for the 3D stage; set its size here (default h-72 max-w-sm). |
| idleAngle | number | 0 | Resting yaw in degrees, so the cube rests on a corner. Ignored under reduced motion. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.