v2

v2 introduces Svelte 5 support and an API overhaul to better solve the community requests from v1. The v1 docs will remain available here

svelte-modals/legacy

There are breaking changes – methods have been renamed, moved around and the internals have been rewritten from stores to runes. While I anticipate this migration is mostly a matter of renaming imports and methods, I’ve provided a legacy wrapper to make the transition easier. This will allow you continue using v1 APIs as a wrapper around v2 and incrementally migrate your codebase.

If you encounter any problems please open an issue.

<script>
  import { openModal, closeModal } from 'svelte-modals/legacy'
  import MyModal from '$lib/components/MyModal.svelte'

  function handleClick() {
    openModal(MyModal, { title: "Alert", message: "This is an alert" })
  }
</script>

<button onclick={handleClick}>Open Modal</button>

Open Modal

Note that Modals from svelte-modals/legacy will continue to use slots instead of snippets. If you want to use snippets in your modal props, you must import Modals from svelte-modals . You can still use open/close methods from svelte-modals/legacy.

Breaking changes

API

• Svelte 5 is now required as a peer dependency
• modals has been changed from a store to being the main entrypoint for most svelte-modals methods.
  • openModal -> modals.open and now returns a promise
    • when using { replace: true } and the currently opened modal prevents the close, the promise will reject
  • closeModal -> modals.close
  • closeAllModals -> modals.closeAll
  • modals -> modals.stack and changed from a store to a rune
  • action -> modals.action and changed from a store to a rune
  • transition -> modals.transition and changed from a store to a rune
• <Modals /> has been updated to use snippets instead of slots. The default slot has been changed to a modals snippet.
  • svelte-modals/legacy continues to use slots and the default slot
• Deferred transitions are now enabled by using the exitBeforeEnter instead of forwarding events

Types

• SvelteModalComponent has been renamed to ModalComponent and updated for Svelte 5 component types
• LazySvelteModalComponent has been renamed to LazyModalComponent and updated for Svelte 5 component types

Migration

Modal props

<script>
  export let isOpen
  const { isOpen } = $props()
</script>

Transitions between modals

<script>
  import { fade } from 'svelte/transition'
  import { exitBeforeEnter } from 'svelte-modals'

  const { isOpen } = $props()
</script>

{#if isOpen}
  <div
    role="dialog"
    class="modal"
    transition:fade|global
    on:introstart
    on:outroend
    use:exitBeforeEnter
  >
    <!-- ... -->
  </div>
{/if}

Methods

openModal

import { openModal } from 'svelte-modals'
openModal(MyModal, props)

import { modals } from 'svelte-modals'
modals.open(MyModal, props)

closeModal

import { closeModal } from 'svelte-modals'
closeModal()

import { modals } from 'svelte-modals'
modals.close()

closeModal

import { closeModals } from 'svelte-modals'
closeModals(2)

import { modals } from 'svelte-modals'
modals.close(2)

closeAllModals

import { closeAllModals } from 'svelte-modals'
closeAllModals()

import { modals } from 'svelte-modals'
modals.closeAll()