Skip to content

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>

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>