# Sonner Alternative: 4 React Toast-Libraries im Vergleich
> Du suchst eine Sonner Alternative? react-hot-toast, React-Toastify und ein Toast im eigenen Code im Vergleich 2026: API, Swipe, Barrierefreiheit, Bundle-Größe.
- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 9. Okt. 2026
- Kategorie: [Vergleiche und Alternativen](https://wingo-ui.com/de/blog/category/comparisons)
- Lesezeit: 12 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/sonner-alternative-react-toast
- Englische Fassung: https://wingo-ui.com/blog/sonner-alternative-react-toast
## Kurz gesagt
Welche Sonner Alternative passt, hängt davon ab, was Sonner für dich nicht leistet, und wenn nichts fehlt, bleib dabei: Sonner ist mit Abstand die meistgeladene der vier Toast-Libraries in diesem Vergleich und bringt Stack, Swipe und Promise-Toasts schon mit. Nimm react-hot-toast für das kleinste Bundle (4,8 kB gzip) und einen Headless Hook, oder React-Toastify für Progress Bars, ein Queue-Limit und einen Benachrichtigungsverlauf. Nimm einen Toast im eigenen Quellcode, etwa den kostenlosen Toast von Wingo UI, wenn du ändern musst, wie sich der Stack auf Smartphones, für Screenreader oder in deinem Design System verhält.
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](https://wingo-ui.com/de/blog/category/comparisons), und der [Guide zu shadcn Alternativen](https://wingo-ui.com/de/blog/shadcn-alternatives) 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](https://wingo-ui.com/components/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.
| | [Sonner](https://github.com/emilkowalski/sonner) | [react-hot-toast](https://react-hot-toast.com/docs) | [React-Toastify](https://fkhadra.github.io/react-toastify/introduction/) | [Wingo UI Toast](https://wingo-ui.com/components/toast) |
| --- | --- | --- | --- | --- |
| Version | 2.0.8, 9. Aug. 2026 | 2.6.1, 16. Sep. 2026 | 11.1.0, 19. Apr. 2026 | Toast 1.0.0 in Registry 1.7.0, 8. Okt. 2026 |
| Lizenz | MIT | MIT | MIT | Kostenloses Item, [Wingo UI Lizenz](https://wingo-ui.com/de/legal/license) |
| npm-Downloads pro Woche | 50,8 Millionen | 3,7 Millionen | 2,9 Millionen | Nicht auf npm, wird von der CLI kopiert |
| Größe, min + gzip | 9,6 kB | 4,8 kB | 9,8 kB | 12,2 kB, plus motion, falls du es noch nicht nutzt |
| Standardposition und -dauer | unten rechts, 4 s | oben mittig, 2 s für Erfolg, 4 s für alles andere | oben rechts, 5 s | unten rechts, 4 s |
| Stack | Eingeklappt, fächert bei Hover auf, 3 sichtbar | Eine Liste | Eine Liste, oder eingeklappt mit `stacked` | Eingeklappt, fächert bei Hover oder Tap auf, 3 sichtbar |
| Swipe zum Schließen | 45px oder ein schneller Wisch | Keiner | Nur Touch, 80% der Breite | Touch und Maus, ein Viertel des Toasts oder ein schneller Wisch |
| Tastatur | Alt+T fokussiert die Liste, Esc klappt sie ein | Keine | Alt+T fokussiert einen Toast und pausiert, Esc setzt fort | Alt+T fokussiert den neuesten Toast, Esc schließt ihn |
| Screenreader | Eine höfliche Region für alle Toasts | Jeder Toast ein höflicher `status` | Jeder Toast `role="alert"` | Jeder Toast ein höflicher `status`, Fehler `alert` |
| Smartphone-Layout | Volle Breite unter 600px | Nichts eingebaut | Volle Breite unter 480px, Safe Areas | Volle Breite unter 768px, Safe Areas |
| Reduced Motion | Transitions aus | Blendet ein statt zu sliden | Keine Regel im Paket | Blendet ein statt zu sliden |
| Eigenes Markup | `unstyled`, `toast.custom` | `react-hot-toast/headless` | `react-toastify/unstyled` | `components/ui/toast.tsx` bearbeiten |
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:
```tsx
// 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 },
});
}
```
```tsx
// 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) => (
Anzeige gelöscht
));
}
```
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](https://wingo-ui.com/components/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](https://ui.shadcn.com/docs/changelog/2026-07-toast), 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](https://ui.shadcn.com/docs/components/radix/sonner): `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](https://base-ui.com/react/components/toast) 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](https://wingo-ui.com/de/blog/minimum-touch-target-size-react-tailwind) 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](https://wingo-ui.com/de/blog/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.
> Live-Demo (Toast): Fahr mit der Maus über den Stack, um ihn aufzufächern (auf dem Smartphone tippen), und wisch dann den vorderen Toast zum Rand. Drück Failed payment, dann Retry: Derselbe Toast zeigt erst einen Ladezustand und dann den Erfolg. Probier sie unter [Toast](https://wingo-ui.com/components/toast) aus und installier sie mit `npx wingo-ui@latest add toast`.
## 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 `` 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](https://wingo-ui.com/components/alert) folgt für Screenreader derselben Aufteilung: Die Tones `danger` und `warning` nutzen `role="alert"`, die anderen `role="status"`.
> Live-Demo (Alert): Eine abgelehnte Karte gehört neben den Pay-Button: Drück Try again, und der Alert klappt zu, dann drück Pay, und er klappt wieder auf. Probier sie unter [Alert](https://wingo-ui.com/components/alert) aus und installier sie mit `npx wingo-ui@latest add alert`.
## 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:
```bash
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:
```tsx
// app/providers.tsx
"use client";
import type { ReactNode } from "react";
import { Toaster } from "@/components/ui/toast";
export function Providers({ children }: { children: ReactNode }) {
return (
<>
{children}
);
}
```
Dann rufst du `toast` von überall auf, sogar außerhalb von React oder bevor der Toaster gemountet ist:
```tsx
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](https://wingo-ui.com/docs/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](https://wingo-ui.com/de/pricing); 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:
| Sonner | Wingo UI Toast |
| --- | --- |
| `import { toast } from "sonner"` | `import { toast } from "@/components/ui/toast"` |
| `hotkey={["altKey", "KeyT"]}` | `hotkey="alt+t"` |
| `` für einen zweiten Toaster | `` |
| `toast.promise(...).unwrap()` für das Ergebnis | `toast.promise(...)` gibt das ursprüngliche Promise zurück |
| `theme`-Prop, oder `next-themes` im shadcn-Wrapper | Keins; die Oberfläche nutzt deine Tokens |
| `event.preventDefault()` in einer Action hält den Toast offen | Genauso, oder `keepOpen: true` an der Action |
| `mobileOffset` unter 600px | `mobileOffset` unter 768px, plus `mobilePosition` |
| `toast.message`, `toast.getHistory` | Nicht vorhanden; `useToasts()` liefert die Toasts auf dem Bildschirm |
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.
## Komponenten in diesem Artikel
- [Toast](https://wingo-ui.com/components/toast) (Free): React toast notifications: mount one Toaster and call toast() from anywhere, with stacking, swipe to dismiss and a pause while you read. Installation: `npx wingo-ui@latest add toast`
- [Alert](https://wingo-ui.com/components/alert) (Free): A React alert for inline messages about a page or section, from a failed payment to a maintenance banner, in three variants and six tones. Installation: `npx wingo-ui@latest add alert`
## 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.
---
Quelle: https://wingo-ui.com/de/blog/sonner-alternative-react-toast