npmpackage.info

Gathering detailed insights and metrics for svelte-modals

Other packages similar to svelte-modals

@nelhoa/svelte-modals

1.1.4

A flexible modal library with TailwindCSS.

svelte-promise-modals

0.1.5

The better way to handle modals in your Svelte apps. Promised! 🤞

viancorp-modals

1.4.2

Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

yasp-modals

1.0.7

Yet Another Svelte Package: Modals

Gathering detailed insights and metrics for svelte-modals

svelte-modals - 2.0.1 | npmpackage.info

svelte-modals

A simple, flexible, zero-dependency modal stack manager for Svelte.

2.0.1

164

TypeScript

19.88 kB

2.3

Installations

npm install svelte-modals

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

22.11.0

NPM Version

11.0.0 Score

81.9

Supply Chain

98.5

Quality

80.3

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

1

Total

12

Closed

2

Merged

9

Issues

Open

4

Total

30

Closed

26

Releases

v2.0.1

Updated on Mar 09, 2025

v2.0.0

Updated on Nov 11, 2024

1.3.0

v1.3.0

Updated on Jul 02, 2023

1.2.0

Updated on Aug 17, 2022

1.1.0

Updated on Jan 30, 2022

1.0.1

Updated on Jul 30, 2021

View All 6 releases

Languages

TypeScript

Svelte

JavaScript

TypeScript (71.64%)

Svelte (17.7%)

JavaScript (10.67%)

Developer

mattjennings

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

164 Stars

115 Commits

11 Forks

3 Watchers

6 Branches

2 Contributors

Updated on Jul 16, 2025

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

2.0.1

Package Id

svelte-modals@2.0.1

Unpacked Size

19.88 kB

Size

5.81 kB

File Count

NPM Version

11.0.0

Node Version

22.11.0

Published on

Mar 09, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

svelte-modals

A simple, flexible, zero-dependency modal manager for Svelte.

View documentation

Getting Started

Installation

1npm install svelte-modals

Add <Modals /> to your app

All opened modals will be rendered inside <Modals />. If you're using SvelteKit, +layout.svelte would be appropriate place to put it. Otherwise, wherever you want the modals to be rendered.

1<script>
2  import { Modals } from 'svelte-modals'
3</script>
4
5<Modals>
6  <!-- shown when any modal is opened -->
7  {#snippet backdrop({ close })}
8    <div class="backdrop" onclick={() => close()} />
9  {/snippet}
10</Modals>
11
12<style>
13  .backdrop {
14    position: fixed;
15    top: 0;
16    bottom: 0;
17    right: 0;
18    left: 0;
19    background: rgba(0, 0, 0, 0.5);
20  }
21</style>

Create your Modal component

Let's create a basic modal component:

1<script>
2  const {
3    // provided by <Modals />
4    isOpen,
5    close,
6
7    // your props
8    title,
9    message
10  } = $props()
11</script>
12
13{#if isOpen}
14  <div role="dialog" class="modal">
15    <div class="contents">
16      <h2>{title}</h2>
17      <p>{message}</p>
18      <div class="actions">
19        <button onclick={() => close()}>OK</button>
20      </div>
21    </div>
22  </div>
23{/if}
24
25<style>
26  .modal {
27    position: fixed;
28    top: 0;
29    bottom: 0;
30    right: 0;
31    left: 0;
32    display: flex;
33    justify-content: center;
34    align-items: center;
35
36    /* allow click-through to backdrop */
37    pointer-events: none;
38  }
39
40  .contents {
41    min-width: 240px;
42    padding: 16px;
43    background: white;
44    display: flex;
45    flex-direction: column;
46    justify-content: space-between;
47    pointer-events: auto;
48  }
49
50  h2 {
51    text-align: center;
52    font-size: 24px;
53  }
54
55  p {
56    text-align: center;
57    margin-top: 16px;
58    border-radius: 6px;
59  }
60
61  .actions {
62    margin-top: 32px;
63    display: flex;
64    justify-content: flex-end;
65  }
66</style>

Try it out

Import modals anywhere in your app to open or close your modals

1<script>
2  import { modals } from 'svelte-modals'
3  import MyModal from '$lib/components/MyModal.svelte'
4
5  function handleClick() {
6    modals.open(MyModal, { title: 'Alert', message: 'This is an alert' })
7  }
8</script>
9
10<button onclick={handleClick}>Open Modal</button>

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to svelte-modals

Other packages similar to svelte-modals

svelte-modals

Installations

Developer Guide

Yes

ESM

22.11.0

11.0.0

Score

Pull Requests

1

12

2

9

Issues

4

30

26

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

svelte-modals

Getting Started

Installation

Add <Modals /> to your app

Create your Modal component

Try it out

10

10

1

0

0

0

0

0

0

0

0

0

0

2.3

/10