Sveltekit Popup Modal

Sv popup is an easy to use package meant for creating simple popups/modals for svelte or sveltekit apps.

svelte logo

Want to build a Svelte/SvelteKit site? Hire Me.

I have used a few popup/modal packages available for Svelte but none of them felt easy to use.

They are really useful but not user-friendly. I thought I will make something that should ask users for no additional info.

So a modal usually has a trigger and content. These are the only two parts a user has to define. I think asking users to add the content inside a named slot is a lot to ask and can be confusing at times.

In sv-popup however, we do not use named slots. We just use components instead.

There will be 3 parts.

  • a wrapper <Modal>
  • content(to be shown inside the modal) <Content>
  • a trigger <Trigger>.

Here is a simple popup

<Modal>
  <Content>
    Hello
  </Content>
  <Trigger>
    Open a simple unstyled modal
  </Trigger>
</Modal>

You can check this in action here

You can see that there are even simple text can be a trigger. You can use any HTML inside content or trigger.

I guess this is easier to use than other(maybe even better) packages. Let me know if you have any suggestions on improving this.

Find related articles

Let's discuss on Twitter