Floating Panel
A draggable, minimizable utility palette that snaps to edges, remembers its position, and moves with the arrow keys while its grip has focus.
Preview
Autumn reading list
Twelve picks for long evenings
Layers
- Headline
- Hero image
- Badge
- Grid guides
Inspector
Width224
Height96
Radius6
FillAccent 20%
Opacity100%
Hero image · Rectangle
Colors
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Header title and region name. Required. |
| icon | ReactNode | — | Small icon before the title. |
| defaultPosition | { x: number; y: number } | { x: 12, y: 12 } | Starting px inside the bounds; negative values count from the right or bottom edge. |
| minimized / defaultMinimized / onMinimizedChange | boolean / boolean / (minimized) => void | — / false / — | Collapse to the header. |
| onClose | () => void | — | Shows a close button. |
| storageKey | string | — | Remember the position in localStorage under this key. |
| snap | boolean | true | Snap to the nearest side (and top/bottom when close) on release. |
| onPositionChange | ({ x, y }) => void | — | After a drag, keyboard move or dock. |
| strategy | "absolute" | "fixed" | "absolute" | Move within the positioned parent, or the viewport. |
| footer | ReactNode | — | A bar under the body. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.