dialogs.svelte

Promise-based alert, confirm, and prompt dialogs for Svelte 5 – with a drop‑in provider component that lets you fully customize their UI using Svelte Snippets while keeping a simple imperative API.

Features

• Drop‑in replacement for native alert/confirm/prompt returning promises.
• Customizable content via Svelte 5 Snippets ({#snippet ...}) per dialog type or per individual call.
• Queueing: multiple calls are serialized; only one dialog is visible at a time.
• Keyboard: Escape resolves (alert: void, confirm: false, prompt: null).
• Automatic focus handling (first button or input field).
• Fallback to native dialogs when no provider is present – works even outside layout.

Installation

pnpm add dialogs.svelte
# or
npm install dialogs.svelte

or, You can copy the component directly into your project:

Open src/lib/dialogs.svelte
(Copying the component makes it easier to customize styles and other aspects.)

Quick Start

Wrap a layout (or page) with the Dialogs component and provide snippets for any dialogs you want to customize. Omit a snippet to use a default minimal version.

<!-- +layout.svelte -->
<script lang="ts">
    import Dialogs from 'dialogs.svelte';
    let nameInput = $state('');
</script>

<Dialogs>
    <!-- Your app -->
    <slot />

    {#snippet alert(message, ok)}
        <div class="alert">
            <p>{message}</p>
            <button onclick={ok}>OK</button>
        </div>
    {/snippet}

    {#snippet confirm(message, ok, cancel)}
        <div class="confirm">
            <p>{message}</p>
            <button onclick={ok}>OK</button>
            <button onclick={cancel}>Cancel</button>
        </div>
    {/snippet}

    {#snippet prompt(message, defaultValue, ok, cancel)}
        <div class="prompt">
            <p>{message}</p>
            <input
                bind:value={nameInput}
                {@attach defaultValue
                    ? (el) => {
                            if (defaultValue) {
                                nameInput = defaultValue;
                                el.value = defaultValue;
                                el.setSelectionRange(0, defaultValue.length);
                            }
                        }
                    : undefined}
            />
            <button
                onclick={() => {
                    ok(nameInput);
                    nameInput = '';
                }}>OK</button
            >
            <button onclick={cancel}>Cancel</button>
        </div>
    {/snippet}
</Dialogs>

<style>
    .alert,
    .confirm,
    .prompt {
        background: #fff;
        padding: 1rem 2rem 2rem;
        border-radius: 1rem;
    }
</style>

Use the dialogs from any descendant component:

<script lang="ts">
    import { useDialogs } from 'dialogs.svelte';
    const { alert, confirm, prompt } = useDialogs();

    async function run() {
        await alert('Hello');
        const ok = await confirm('Are you sure?');
        if (!ok) return;
        const name = await prompt('Your name?', 'Alice');
        console.log({ name });
    }
</script>

<button onclick={run}>Do stuff</button>

If you call useDialogs() outside of a provider, it falls back to the native blocking dialogs automatically.

Contributing

1. Clone & install: pnpm install
2. Dev server: pnpm dev
3. Run checks: pnpm check / pnpm test
4. Open a PR with a concise description + before/after behavior.

License

MIT