Sonner Alternative: 4 React Toast-Libraries im Vergleich

Nach einer Sonner Alternative suchst du, wenn am Toast etwas nicht mehr passt: das Bundle, ein Design System, das sich mit dem Stylesheet beißt, ein Accessibility-Review oder Action-Buttons, die man auf dem Smartphone kaum trifft. Sonner ist aus guten Gründen noch immer der Standard-Toast für React, also sollte ein Wechsel ein konkretes Problem lösen. Dieser Vergleich stellt Sonner neben react-hot-toast, React-Toastify und einen Toast im eigenen Quellcode: API, Stack, Swipe, Screenreader, Smartphones und Bundle-Größe, geprüft im Oktober 2026 am veröffentlichten Code und an der Doku jedes Pakets.

Wir bauen Wingo UI, dessen kostenloser Toast hier die Option im eigenen Quellcode ist. Lies das also als Anbietervergleich mit Quellen. Er sagt auch, wo die anderen jeweils die bessere Wahl sind. Weitere direkte Vergleiche findest du unter Vergleiche und Alternativen, und der Guide zu shadcn Alternativen vergleicht ganze Komponentenbibliotheken.

Was ist die beste Sonner Alternative für React?

Die beste Sonner Alternative hängt davon ab, wofür du wechselst:

• Ein kleineres Bundle und eigenes Markup: react-hot-toast. In unserem Build kam es auf 4,8 kB gzip, halb so viel wie Sonner, und mit dem Hook useToaster renderst du jeden Toast selbst.
• Mehr eingebaute Features: React-Toastify. Progress Bars, eine Queue mit limit, toast.update, ein gestapelter Modus, RTL und ein Add-on für den Benachrichtigungsverlauf, ohne zusätzliche Pakete.
• Verhalten, das du ändern kannst: ein Toast, dessen Quellcode in deinem Repository liegt, etwa der kostenlose Toast von Wingo UI. Er behält eine toast()-API im Stil von Sonner, und Stack, Timer und Smartphone-Layout sind Code, den du bearbeiten kannst.
• Kein Problem zu lösen: bleib bei Sonner. Von den vier ist es mit großem Abstand die meistgeladene React Toast Library, und shadcn/ui installiert es für Projekte mit Radix und React Aria.

Wie schneiden Sonner, react-hot-toast und React-Toastify im Vergleich ab?

Die Tabelle zeigt die jeweils neueste Version jedes Pakets auf npm, Stand 9. Oktober 2026. Die Größen haben wir selbst gemessen: die Toaster-Komponente und die Funktion toast jeder Library, gebündelt mit esbuild 0.28, minifiziert, React als external, dann gzipped. Sonner und React-Toastify fügen ihr CSS aus JavaScript ein, ihre Werte enthalten also die Styles. Die Downloads sind die Zählung von npm für den 1. bis 7. Oktober 2026.

Die Größe des Wingo UI Toasts braucht eine Fußnote: In den meisten Apps ist er der schwerste der vier, weil er mit motion animiert. In einem Projekt im Stil von shadcn, das tailwind-merge, lucide-react und Radix schon mitbringt, kommen 57,6 kB dazu, motion eingeschlossen. Nutzt die App motion bereits, kommen nur seine eigenen 12,2 kB dazu, und ohne geteilte Pakete sind es 69 kB, siebenmal so viel wie Sonner. Seine Styles sind Tailwind-Klassen, die in das Stylesheet deiner App kompiliert werden, deshalb stecken sie nicht in diesen Zahlen.

Sonner vs react hot toast: Welche Library solltest du nutzen?

Nimm Sonner, wenn du Stack, Swipe und Action-Buttons willst, ohne sie zu schreiben. Nimm react-hot-toast, wenn du das kleinste Paket willst und Toasts nach deinen eigenen Vorstellungen rendern möchtest. Beim Aufruf sehen beide gleich aus, bis du einen Button brauchst:

// sonner: action und cancel sind Optionen
import { toast } from "sonner";

export function onDelete(restore: () => void) {
  toast("Anzeige gelöscht", {
    description: "Citybike, Trek FX 2",
    action: { label: "Rückgängig", onClick: restore },
  });
}

// react-hot-toast: keine action-Option, der Button ist also dein Markup
import toast from "react-hot-toast";

export function onDelete(restore: () => void) {
  toast((t) => (
    <span>
      Anzeige gelöscht
      <button
        onClick={() => {
          restore();
          toast.dismiss(t.id);
        }}
      >
        Rückgängig
      </button>
    </span>
  ));
}

Abgesehen von Buttons listet react-hot-toast Toasts auf, statt sie zu stapeln, hat weder Swipe noch Tastaturbedienung und pausiert seine Timer nur bei Mouse Enter und Leave, nicht bei Tastaturfokus oder einem Tab im Hintergrund. Erfolgs-Toasts bleiben standardmäßig 2 Sekunden stehen, knapp für einen Undo-Button. Seine Stärke ist der Headless-Einstieg: useToaster aus react-hot-toast/headless gibt dir die Toasts plus startPause, endPause und calculateOffset. Das ist genau die richtige Form, wenn du das Markup komplett selbst bestimmen und die Gesten selbst schreiben willst.

Sonner liefert ausgefeilte Defaults: einen 356px breiten Stack, Swipe in die Richtungen, die seine Position erlaubt, toast.promise, richColors und einen Close-Button, mit Timern, die pausieren, solange du hoverst, wischst oder der Tab im Hintergrund liegt. Sein Look kommt aus dem eigenen Stylesheet. Um ihn an ein Design System anzupassen, nutzt du also CSS-Variablen und classNames, oder unstyled und eigenes Markup.

Wann ist React-Toastify die bessere Wahl?

Nimm React-Toastify, wenn du Features brauchst, die die anderen weglassen: eine Progress Bar auf jedem Toast, standardmäßig an, und einen kontrollierten progress-Wert für Uploads. limit hält überzählige Toasts in einer Warteschlange, toast.update(id, options) ändert einen Toast an Ort und Stelle, stacked klappt die Liste ein, und das Add-on useNotificationCenter speichert einen Verlauf der Toasts für eine Inbox. Es unterstützt RTL und positioniert seinen Container auf Smartphones mit env(safe-area-inset-*).

Seine Defaults sind die lautesten der vier: ein Close-Button und eine Progress Bar auf jedem Toast, 5 Sekunden Anzeigedauer und role="alert" auf jedem Toast. Screenreader unterbrechen also für eine „Gespeichert“-Meldung, außer du übergibst role="status". Im Paket 11.1.0 haben wir keine Regel für prefers-reduced-motion gefunden, die Standard-Transition Bounce läuft also für alle. Übergib transition={Slide} oder deine eigene cssTransition, wenn dir das wichtig ist.

Wenn genau diese Defaults oder das Styling der Grund sind, warum du eine React Toastify Alternative suchst, ist Sonner der direkteste Ersatz für die Aufrufe (toast.success, toast.error, toast.promise). Die wichtigste Umbenennung betrifft die Ladenachricht des Promise: React-Toastify nennt sie pending, Sonner loading. Ein Verlauf mit Lesestatus ist eine Inbox und damit eine andere Aufgabe: Wingo UI hält ihn in einem eigenen Notification Center mit Glocke und Zähler für Ungelesenes.

Was bedeutet „shadcn toast“ 2026?

Das hängt von der Basis des Projekts ab. Seit Juli 2026 starten neue shadcn/ui-Projekte auf Base UI, und dort installiert npx shadcn@latest add toast einen Toast auf Basis der Base UI Primitives (opens in a new tab), aufgerufen mit toast.add({ title, description }) und toast.promise. In Projekten mit Radix und React Aria ist der alte Toast als deprecated markiert, und die Doku verweist auf Sonner (opens in a new tab): npx shadcn@latest add sonner schreibt eine components/ui/sonner.tsx, die das Paket umhüllt, seine Farben auf deine Tokens --popover und --border abbildet und das Theme aus next-themes liest.

Der shadcn Toast in einem Radix-Projekt ist also Sonner mit deinen Farben: Dir gehört ein kurzer Wrapper, Stack, Timer und Swipe bleiben in node_modules/sonner. Die Version mit Base UI gibt dir mehr vom Markup in die Hand, das Verhalten kommt aus den Toast-Teilen von Base UI. Laut Base UI Doku (opens in a new tab) heißt das: 5 Sekunden Standard-Timeout, ein Limit von 3, Swipe nach unten oder rechts, eine Option priority: "high" für dringende Ansagen und F6, um den Fokus in die Toast-Region zu bewegen.

Was ändert sich auf dem Smartphone?

Auf dem Smartphone unterscheiden sich diese Libraries am stärksten, und zwar in vier Punkten:

• Breite. Sonner nimmt unter 600px die volle Bildschirmbreite mit 16px Rand ein (mobileOffset). React-Toastify tut das unter 480px, mit eckigen Ecken. react-hot-toast hat kein Smartphone-Layout: Seine Toasts sind höchstens 350px breit und sitzen 16px vom Rand entfernt.
• Buttons. Bei Sonner sind die Standard-Buttons für Action und Cancel 24px hoch, genau das Minimum für Touch-Ziele in WCAG 2.2, und sein Close-Button liegt mit 20px darunter. Alle liegen weit unter den 44pt, die Apple für Bedienelemente unter iOS empfiehlt; unser Guide zur minimalen Touch-Target-Größe hat die Zahlen.
• Safe Areas. React-Toastify positioniert seinen Container mit den Safe Area Insets. Sonner und react-hot-toast tun das nicht. Mit viewport-fit=cover kann ein Stack unten also auf dem Home-Indikator des iPhones landen, bis du den Inset selbst zum Offset addierst. Tailwind Safe Area Insets zeigt das Muster.
• Swipe. Sonner schließt nach 45px Weg oder einem schnellen Wisch. React-Toastify reagiert standardmäßig nur auf Touch-Swipes und verlangt 80% der Toast-Breite. react-hot-toast hat keinen Swipe.

Den Toast von Wingo UI haben wir um diese Liste herum gebaut. Unter 768px nehmen Toasts die volle Breite mit 16px Rand ein, jede Kante nutzt max(env(safe-area-inset-*), 16px), und mobilePosition="top" hält sie von einer Tab Bar am unteren Rand fern. Action- und Close-Buttons wirken 32px hoch und behalten auf Touchscreens eine Trefferfläche von 44px. Da es auf dem Smartphone kein Hover gibt, fächert ein Tap den Stack auf.

Wie klingen die Toasts für einen Screenreader?

Alle vier sagen über ARIA Live Regions an; der Unterschied ist, was unterbrochen wird. Eine höfliche Ansage wartet, bis der Screenreader fertig gesprochen hat. Eine assertive, wie sie role="alert" mit sich bringt, fällt ins Wort.

• Sonner packt alle Toasts in eine einzige <section aria-live="polite"> mit dem Label „Notifications alt+T“. Eine fehlgeschlagene Zahlung wird genauso höflich angesagt wie „Kopiert“.
• react-hot-toast gibt jedem Toast role="status" und aria-live="polite", und über die Option ariaProps kannst du einen einzelnen Toast auf alert umstellen.
• React-Toastify gibt jedem Toast role="alert", also unterbricht jeder Toast, außer du änderst die Rolle.
• Wingo UI macht jeden Toast zu einem eigenen höflichen status und stellt Fehler sowie jeden Toast mit important: true auf role="alert" um.

Bei der Tastatur fokussiert Alt+T in Sonner die Liste und Escape klappt sie ein. In React-Toastify fokussiert es einen Toast und pausiert jeden Timer bis Escape, und react-hot-toast hat gar kein Tastenkürzel. Im Toast von Wingo UI fokussiert Alt+T (Option+T auf dem Mac) den neuesten Toast, Tab geht durch seine Buttons, Escape schließt den fokussierten Toast, und die Timer pausieren, solange der Tastaturfokus darin liegt. So bleibt genug Zeit, um Rückgängig zu erreichen.

Wann lässt du den Toast weg und nimmst einen Inline-Alert?

Lass ihn weg, wenn die Meldung gelesen werden muss oder jemand darauf reagieren muss. Eine abgelehnte Karte, ein Formular, das nicht gespeichert wurde, oder eine Session kurz vor dem Ablauf brauchen eine Meldung, die direkt neben dem Problem stehen bleibt. Toasts laufen ab, sitzen weit weg vom Feld, das sie ausgelöst hat, und können auf dem Smartphone den Submit-Button verdecken. Nimm dafür einen Inline-Alert und behalte Toasts für Bestätigungen, Fortschritt und schnelles Rückgängigmachen. Der kostenlose Alert folgt für Screenreader derselben Aufteilung: Die Tones danger und warning nutzen role="alert", die anderen role="status".

Was bringt dir ein Toast im eigenen Quellcode?

Ein Toast im eigenen Quellcode legt die ganze Komponente in dein Repository: den Store, den Stack, die Geste und das Markup. Du reviewst ihn wie den Rest deines Codes, und bei npm update ändert sich nichts unter dir. Der Preis: Fixes von upstream bekommst du nur, wenn du sie holst. Der Toast von Wingo UI ist kostenlos; installier ihn mit der CLI:

npx wingo-ui@latest add toast

Das schreibt components/ui/toast.tsx plus den Button, den Spinner und die Hooks und Helper, die er nutzt. Binde den Toaster einmal ein, neben der App:

// app/providers.tsx
"use client";

import type { ReactNode } from "react";
import { Toaster } from "@/components/ui/toast";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <>
      {children}
      <Toaster richColors mobilePosition="top" />
    </>
  );
}

Dann rufst du toast von überall auf, sogar außerhalb von React oder bevor der Toaster gemountet ist:

import { toast } from "@/components/ui/toast";

export function onDelete(restore: () => void) {
  toast("Anzeige gelöscht", {
    description: "Citybike, Trek FX 2",
    action: { label: "Rückgängig", onClick: restore },
  });
}

export async function publishListing(publish: () => Promise<{ price: string }>) {
  // gibt das ursprüngliche Promise zurück: await liefert die Daten oder wirft den Fehler
  return toast.promise(publish, {
    loading: "Anzeige wird veröffentlicht…",
    success: (data) => `Veröffentlicht für ${data.price}`,
    error: "Anzeige konnte nicht veröffentlicht werden",
  });
}

Über diese Aufrufe hinaus bekommst du mit der Datei:

• Updates per id. Rufst du toast.loading("3 Fotos werden hochgeladen… 2/3", { id: "upload" }) erneut auf, wird der Toast an Ort und Stelle aktualisiert. Ein neuer Typ mit derselben id, etwa toast.success, startet ihn neu, damit die Dauer Infinity des Lade-Toasts nicht am Erfolg hängen bleibt.
• Deine Tokens. Die Oberfläche nutzt bg-popover und die Status-Töne deines Themes, Dark Mode braucht also kein theme-Prop. Visuelle Props wie radius, width und richColors lassen sich auch app-weit über die Defaults von UIProvider setzen.
• Updates, die deine Änderungen behalten. npx wingo-ui@latest update führt ein neues Release mit der Datei zusammen, die du geändert hast, wie es die Doku zu Updates beschreibt.

Die Trade-offs, ganz offen: Er ist jünger als die drei Pakete, und hinter Sonner stehen Jahre an Bug Reports. Er kostet mehr Bytes als jedes davon, selbst in einer App, die motion schon nutzt. In einem shadcn-Projekt mit einem Base-UI-Style installierst du ihn mit der CLI von Wingo UI statt mit shadcn add, denn dieser Style schreibt asChild um, worauf der Button angewiesen ist. Das Notification Center gehört zu Wingo UI Pro; Toast und Alert sind kostenlos.

Wie wechselst du von Sonner zum Toast von Wingo UI?

Bei den meisten Aufrufen ändert sich nur der Import. Die API orientiert sich an Sonner: toast, toast.success, error, warning, info und loading, toast.promise, toast.custom, toast.dismiss, die Optionen action, cancel und toasterId, und die Props position, expand, visibleToasts, duration, richColors und closeButton behalten ihre Namen und Defaults. Die Unterschiede:

Wenn du den shadcn-Wrapper genutzt hast, lösch components/ui/sonner.tsx, lass den Import von Toaster auf @/components/ui/toast zeigen und ersetz from "sonner" in den Dateien, die toast aufrufen. Entfern dann jedes theme-Prop am Toaster und das .unwrap() nach Promise-Toasts; beides meldet dir TypeScript.

Wo solltest du anfangen?

Wenn Sonner funktioniert und sich niemand beschwert hat, behalte es. Geht es bei der Beschwerde um Smartphones, Screenreader oder ein Design System, das sich nicht biegen lässt, probier einen Toast im eigenen Quellcode: Führ npx wingo-ui@latest add toast aus, kostenlos und ohne Account, tausch den Import an ein paar Aufrufen und öffne die App auf deinem eigenen Smartphone.

Häufige Fragen

Was ist die beste Sonner Alternative für React?

Das hängt davon ab, warum du wechselst. react-hot-toast ist am kleinsten und hat einen Headless Hook, React-Toastify bringt die meisten Features mit, und ein Toast im eigenen Quellcode wie der kostenlose Toast von Wingo UI behält eine API im Stil von Sonner, während jedes Verhalten in einer Datei steckt, die du bearbeiten kannst.

Ist Sonner besser als react-hot-toast?

Sonner kann ab Werk mehr: einen eingeklappten Stack, Swipe zum Schließen, Action- und Cancel-Buttons, einen Promise-Toast und das Kürzel Alt+T. react-hot-toast ist mit 4,8 kB gzip in unserem Build etwa halb so groß und liefert den Headless Hook useToaster, hat aber keinen Swipe, kein Tastenkürzel und keine eingebauten Action-Buttons.

Nutzt shadcn/ui für Toasts noch Sonner?

Das hängt von der Basis des Projekts ab. In Projekten mit Radix und React Aria ist der alte Toast deprecated, und npx shadcn@latest add sonner installiert einen kurzen Wrapper um das Paket sonner. In Projekten mit Base UI, seit Juli 2026 der Standard für neue Projekte, installiert npx shadcn@latest add toast einen Toast auf Basis von Base UI mit der API toast.add().

Welche React Toast-Library ist die kleinste?

react-hot-toast, mit 4,8 kB minifiziert und gzipped in unserer Messung mit esbuild im Oktober 2026. Sonner kam auf 9,6 kB und React-Toastify auf 9,8 kB, beide inklusive des CSS, das sie aus JavaScript einfügen.

Sind Toast-Benachrichtigungen für Screenreader barrierefrei?

Sie werden über ARIA Live Regions angesagt, aber die Libraries unterscheiden sich in der Dringlichkeit: Sonner sagt alles höflich an, React-Toastify markiert standardmäßig jeden Toast mit role="alert", und bei react-hot-toast und dem Toast von Wingo UI dürfen einzelne Toasts unterbrechen. Alles, worauf jemand reagieren muss, gehört in einen Inline-Alert, denn Toasts laufen ab.