Tailwind CSS Share Modal
A share modal for Tailwind CSS. Use it to let people copy a link and manage who can view or edit a document. Built with the dialog, avatar, and select components.
<button type="button" class="btn btn-outline" id="share-modal-trigger">
Share
</button>
<dialog class="dialog" data-sp-toggle="#share-modal-trigger">
<div class="dialog-panel">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon absolute top-3 right-3"
data-sp-dismiss=""
aria-label="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
<div class="dialog-header">
<h2 class="dialog-title">Share Document</h2>
<p class="dialog-description">
Invite others to view or edit this document and work together
seamlessly.
</p>
</div>
<div class="dialog-content gap-6">
<div class="flex gap-2">
<input
class="input flex-1"
type="text"
readonly=""
aria-label="Document link"
value="https://example.com/doc/abc123"
/><button
type="button"
class="btn btn-outline btn-icon"
aria-label="Copy link"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path>
</svg>
</button>
</div>
<div class="separator"></div>
<span class="text-sm font-medium">People with access</span>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
alt="Leila Navarro"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">LN</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Leila Navarro</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select
class="select h-8 w-22"
aria-label="Permission for Leila Navarro"
>
<option value="write" selected="">Write</option>
<option value="read">Read</option>
</select>
</div>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
alt="Theo Marchetti"
src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">TM</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Theo Marchetti</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select
class="select h-8 w-22"
aria-label="Permission for Theo Marchetti"
>
<option value="write">Write</option>
<option value="read" selected="">Read</option>
</select>
</div>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
alt="Maya Santoso"
src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">MS</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Camille Laurent</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select
class="select h-8 w-22"
aria-label="Permission for Camille Laurent"
>
<option value="write">Write</option>
<option value="read" selected="">Read</option>
</select>
</div>
</div>
</div>
</dialog>