A Sonner alternative that shows one toast at a time

Sonner is a good library and it stacks toasts. Ding makes a different choice: one toast on screen, and a new message turns the current toast into the new one. Which you want depends on your app.

Try it:

Why I made one toast at a time

In the apps I work on, a burst of events (save, then sync, then a failed request) produced a stack that covered the page and was harder to read than a single message. I wanted the latest message to win, with a visible transition so the user sees that it changed.

Pick Ding if

You want one message at a time. You update the same toast through loading, success and undo. You want zero dependencies and no CSS import. Or you use Svelte 5 or plain JavaScript as well as React.

Pick Sonner if

You need several toasts visible together, or you want a larger ecosystem and track record. Ding does not stack, and that is not going to change.

Switching

The calls look familiar. Render one Toaster, then:

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

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

Check the options you use against the docs before swapping, since not every option exists. Setup details are in React toast notifications. If you use Svelte, see the svelte-sonner alternative.

Ding is open source on GitHub. A star is the easiest way to say it was useful.