Most toast libraries do the same thing: a card fades in, sits there, fades out. When the next one arrives, it stacks on top or replaces the old one.

I wanted toasts that feel like one object changing state, so I built Ding, an open source toast library with real spring physics.

What is different

  • Toasts morph in place. A loading toast turns into success or error without a new card appearing.
  • Zero dependencies. React, Svelte, Vue and plain JavaScript share the same core.
  • Accessible by default. Screen reader announcements, Escape to dismiss and Alt+T to focus the toast.

Usage 

npm i @yusufceng1z/ding-react 
import { Toaster, toast } from '@yusufceng1z/ding-react'; <Toaster /> toast.success('Saved'); toast.error('Could not save', { description: 'Network failed.', action: { label: 'Retry', onClick: () => save() }, });

Svelte, Vue and vanilla JS packages work the same way: @yusufceng1z/ding-svelte, @yusufceng1z/ding-vue, @yusufceng1z/ding.

Try it

Feedback and issues are welcome.