sonner-wc

Sonner's toast UX as a framework-agnostic Web Component. Drop it into anything — vanilla HTML, React, Vue, Svelte — same API, same look, no framework dependencies.

Get started Playground

npm install sonner-wc

<body>
  <!-- your html here -->
  <script type="module" src="https://unpkg.com/sonner-wc/dist/sonner-wc.bundle.js"></script>
  <sonner-toaster position="bottom-right" theme="system"></sonner-toaster>
</body>

Drop in anywhere

One <script> from a CDN or one import from npm. No build step, no peer dependencies.

Framework-agnostic

A standard custom element — React, Vue, Svelte, and plain HTML all talk to it the same way.

Sonner parity

Stacking, hover-to-expand, swipe, themes, rich colors, toast.promise(), six positions.