Svelte 5 toast notifications

Ding has a Svelte package built for Svelte 5. It has no dependencies, needs no stylesheet, and the toast function works from components and from plain modules.

Try it:

Install

npm i @yusufceng1z/ding-svelte

It targets Svelte 5 only. If you are still on Svelte 4, this package will not work for you.

Mount it in the root layout

In SvelteKit that is src/routes/+layout.svelte. In a plain Svelte app, use your top-level component.

<script>
        import { Toaster } from '@yusufceng1z/ding-svelte';
        let { children } = $props();
      </script>

      {@render children()}
      <Toaster position="top-center" theme="system" />

Show a toast

import { toast } from '@yusufceng1z/ding-svelte';

      toast.success('Saved');
      toast.error('Payment failed', { description: 'Card declined' });

You can call it from a +page.ts load function, a store, an event handler, anywhere that runs in the browser. Call it on the server and nothing happens, since there is no page to show it on.

Behavior to know about

There is only ever one toast on screen. A new call changes the visible toast into the new message with a spring animation instead of adding a second one. That is the main difference from stacking libraries such as svelte-sonner, which I compare on the svelte-sonner alternative page.

Errors, loading toasts and toasts that have a button stay until dismissed. Everything else closes after five seconds. For loading states see loading toast, and for undo buttons see undo toast.