Share sheet
A sheet that slides up from the bottom with contacts, apps and a copy link button that confirms.
Settings
Code
<div class="uv-osh"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire">Share</button><div class="scr"></div><div class="sh" role="dialog" aria-modal="true" aria-label="Share"><i class="gr" aria-hidden="true"></i><div class="hd"><span class="th" aria-hidden="true"></span><span><b>Hike in the Picos de Europa</b><small>rutas.app/picos</small></span></div><div class="pp"><button type="button"><span class="av" style="--c:#f97316">A</span>Ana</button><button type="button"><span class="av" style="--c:#3b82f6">L</span>Leo</button><button type="button"><span class="av" style="--c:#ec4899">S</span>Sara</button><button type="button"><span class="av" style="--c:#10b981">I</span>Iván</button><button type="button"><span class="av" style="--c:#a855f7">N</span>Noa</button></div><div class="ap"><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 17.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6a2.5 2.5 0 0 1-2.5 2.5H9z"/></svg>Messages</button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="3"/><path d="M4 7l8 6 8-6"/></svg>Mail</button><button type="button" class="cp"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg><span class="a">Copy link</span><span class="b">Copied</span></button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="5" cy="12" r="1.3" fill="currentColor"/><circle cx="12" cy="12" r="1.3" fill="currentColor"/><circle cx="19" cy="12" r="1.3" fill="currentColor"/></svg>Más</button></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Sharing works best when the most likely targets are one tap away. This bottom sheet slides up with a grab handle, a preview of what is being shared, a row of recent contacts with colored avatars and a row of actions for messages, mail, copy link and more. Copying the link puts it on the clipboard and turns the button green with a confirmation.
It is a modal dialog with focus moved inside on open and Escape or a tap on the backdrop to close it. Rows scroll horizontally on small screens, and the main color tints the action icons so it adapts to any brand.