Modal

An overlay dialog with backdrop and close button.

uioverlaydialog

Installation

Copy the component file into your project's src/lib/components/ directory.

templates/Modal.svelte

Usage

<script>
  import Modal from '$lib/components/Modal.svelte';

  let showModal = $state(false);
</script>

<button onclick={() => showModal = true}>Open Modal</button>

<Modal bind:open={showModal} label="Example Modal">
  <svelte:fragment slot="header">
    <h2 class="text-xl font-semibold text-white">Modal Title</h2>
  </svelte:fragment>

  <p class="text-neutral-400">This is the modal content.</p>

  <svelte:fragment slot="footer">
    <button
      class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
      onclick={() => showModal = false}
    >
      Confirm
    </button>
  </svelte:fragment>
</Modal>

Props

Prop	Type	Default	Description
open	boolean	false	Whether the modal is open
closeOnBackdrop	boolean	true	Whether clicking the backdrop closes the modal
closeOnEscape	boolean	true	Whether pressing Escape closes the modal
showClose	boolean	true	Whether to show the close button
size	'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'	'md'	Modal size
label	string	'Modal'	Accessible label for the modal

Slots

Slot	Description
default	Main modal content
header	Optional header section
footer	Optional footer section with actions

Files

Modal.svelte