Svelte Rune Dialog

Svelte Rune Dialog is a simple dialog component for Svelte 5. You can check the demo here.

Svelte Rune Dialog uses <dialog> element so dialog content will be rendered at #top-layer. If you want to know more about <dialog> element, please refer to MDN Web Docs.

[!IMPORTANT]
Svelte Rune Dialog uses @starting-style for animations. Some browsers may not support @starting-style. You can check if your browser supports @starting-style by visiting Can I use.

How to use

You can use this component easily as an example below.

<script lang="ts">
    import { Dialog } from '$lib/index.js';

    let isOpen = $state(false);

    const toggleDialog = () => {
        isOpen = !isOpen;
    };

    const closeDialog = () => {
        isOpen = false;
    }
</script>

<h1>Svelte Rune Dialog Example</h1>
<button onclick={toggleDialog}>{isOpen ? 'Close' : 'Open'} dialog</button>

<Dialog bind:isOpen --backdrop-color="rgba(0, 0, 0, 0.8)">
  <div>
    <h2>Dialog Title</h2>
    <p>Dialog Content</p>
    <button onclick={closeDialog}>Close</button>
  </div>
</Dialog>

Properties

Events

Style properties

Demo

You can check the demo here.

Or you can run the demo by following steps below.

1. Clone this repository.
2. Run npm install to install dependencies.
3. Run npm run dev or npm run dev -- --open to start the development server.
4. Open http://localhost:5173 in your browser.

If you use yarn then

1. Clone this repository.
2. Run yarn install to install dependencies.
3. Run yarn dev or yarn dev --open to start the development server.
4. Open http://localhost:5173 in your browser.