Modal Components

Snippets can be passed in as props the same way you would with a regular Svelte 5 component.

<script>
  import { modals } from 'svelte-modals'
  import SnippetModal from '$lib/components/SnippetModal.svelte'

  function onclick() {
    modals.open(SnippetModal, {
      content
    })
  }
</script>

{#snippet content()}
  <div>Snippet content</div>
{/snippet}

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

Open Modal

Raw snippets

You can also use Svelte’s createRawSnippet if you wish

<script>
  import { modals } from 'svelte-modals'
  import SnippetModal from '$lib/components/SnippetModal.svelte'
  import { createRawSnippet } from 'svelte'

  function onclick() {
    modals.open(SnippetModal, {
      content: createRawSnippet(() => ({
        render: () => `<div>Snippet content</div>`
      }))
    })
  }
</script>

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

Open Modal