Peek Preview
A long-press or hover-intent peek that lifts a card into a larger preview over a dimmed, blurred background with quick actions, dismissed on release or Escape and opened with Enter.
Preview
Moodboard · hold a card to peek
Dune textures
Close-ups of ripples left by the wind, for background plates.
JPG · 1.1 MB · 3200×2000
Press Escape to close, Enter to open.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The card that can be peeked. Required. |
| preview | ReactNode | — | The larger preview. Required. |
| label | string | — | Names the Preview key and the peek dialog. Required. |
| actions | { label, icon?, onSelect?, destructive? }[] | [] | Quick actions under the preview; release over one to run it. |
| onOpen | () => void | — | Adds Open, and Enter opens while peeking. |
| pressDelay | number | 380 | Ms to hold before peeking. |
| hoverDelay | number | false | 700 | Ms the mouse rests before peeking; false to disable. |
| previewWidth | number | 320 | Width of the lifted preview in px. |
| container | "viewport" | "parent" | "viewport" | Cover the page, or stay inside the nearest positioned ancestor. |
| defaultOpen / onOpenChange | boolean / (open) => void | false / — | Start peeked (without moving focus). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.