Sileo Svelte · Sileo Svelte

Sileo Svelte displays compact notifications. When content needs more room, a toast expands in place. Loading, success, and error messages can update the same toast instead of replacing it.

This package is an unofficial Svelte port of the original Sileo library.

Start here

Install the package and its stylesheet.

bun add sileo-svelte

Mount one toaster near the root of your app.

<script lang="ts">
    import { Toaster } from 'sileo-svelte';
    import 'sileo-svelte/styles.css';
</script>

<Toaster position="top-right" />

Call sileo from any client-side component.

<script lang="ts">
    import { sileo } from 'sileo-svelte';

    function save() {
        sileo.success({
            title: 'Release saved',
            description: 'Draft v2.4 is ready for review.'
        });
    }
</script>

<button onclick={save}>Save release</button>

What ships

Six semantic states plus a neutral show helper.
Updates that keep the same toast id.
Promise flows with typed success data.
Action buttons and persistent notifications.
Svelte snippets for descriptions and icons.
Per-toast classes, colors, and timing.

Requirements

Sileo Svelte requires Svelte 5.56 or newer. Motion is included as a runtime dependency; the package has no utility CSS dependency. Import its stylesheet once, then use normal Svelte components and TypeScript.

Try the real component

The playground runs every documented scenario against the package itself. Change the viewport position, run a flow, and copy the exact source beside it.

Next step

Read Installation for the full root layout setup and default options. Check the Changelog before upgrading between beta versions.