Share Sheet
A share panel with a link preview card, copy link, generic channel buttons, a QR slot and an embed-code tab, as a dialog on desktop and a bottom sheet on phones, or inline.
Preview
Share
Ridge Loop · 14 km
A half-day circuit over the north ridge, with two water stops and a long descent.
pebble.example/trails/ridge-loop
Share
Ridge Loop · 14 km
A half-day circuit over the north ridge, with two water stops and a long descent.
pebble.example/trails/ridge-loop
Dialog on desktop, bottom sheet on phones
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| url | string | — | The link to share. Required. |
| title | string | — | Preview card title. Required. |
| description | string | — | Two-line summary on the card. |
| image | ReactNode | — | Decorative cover for the card. |
| channels | { id, label, icon, href?, onSelect? }[] | Email, Message, Embed, QR, More | Replace the channel buttons. QR shows only with qrCode; More only where Web Share exists. |
| qrCode | ReactNode | — | Your QR code for the URL. |
| embedCode | (size: "small" | "medium" | "large") => string | iframe of url | Builds the embed snippet. |
| defaultTab | "link" | "embed" | "link" | The starting tab. |
| onShare | (channel: string) => void | — | After a copy ("copy-link", "copy-embed") or a channel pick. |
| ShareSheet: children / open / defaultOpen / onOpenChange / sheetTitle | ReactNode / boolean / boolean / (open) => void / string | — / — / — / — / "Share" | The trigger and modal state. A dialog on desktop, a bottom sheet on phones. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.