Modal — Svelte

Modal component — Svelte.

Modal component

Dialog with overlay, focus trap, optional sizes (sm, md, lg). Close via button, overlay click, or Escape.

Live example

Open modal

Size

Usage

svelte svelte 
<script>
  import Modal from './components/svelte/Modal.svelte';
  let open = $state(false);
</script>

<button onclick={() => (open = true)}>Open</button>
<Modal bind:open title="Title" closeOnOverlayClick closeOnEscape>
  <p>Body content.</p>
  {#snippet footer()}
    <button onclick={() => (open = false)}>Close</button>
  {/snippet}
</Modal>