A svelte-sonner alternative for Svelte 5

svelte-sonner is a Svelte port of Sonner and it stacks toasts. Ding is a separate library built around one toast on screen that changes in place when a new message arrives.

Try it:

Install and mount

npm i @yusufceng1z/ding-svelte

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

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

Use it

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

      toast.success('Saved');
      toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Failed' });

Should you switch

If you want one message at a time and no dependencies, yes, it is worth trying. If you need several toasts on screen at once, stay with a stacking library. Ding only supports Svelte 5.

The full Svelte setup is on the Svelte toast page, and the reasoning behind one toast at a time is on the Sonner alternative page.