Sonner: Eine Toast-Komponente für React-Anwendungen

LinkEmil KowalskiTool

Sonner ist eine spezialisierte Toast-Komponente für React, die vorgefertigte Benachrichtigungen mit Animationen bereitstellt. Entwickler können sie am Root ihrer Anwendung platzieren und Meldungen über Funktionsaufrufe steuern. Das Tool richtet sich an Webentwickler, die flexible Benachrichtigungen ohne großen Konfigurationsaufwand integrieren möchten.

Das Wichtigste

  1. Wird per npm-Paket 'sonner' installiert und über eine zentrale <Toaster />-Komponente im App-Root eingebunden.
  2. Unterstützt mehrere Varianten wie Success, Info, Warning, Error, Action, Promise sowie eigene benutzerdefinierte Toasts.
  3. Erlaubt sechs verschiedene Ausrichtungen am Bildschirmrand, wobei sich die Wischgesten-Richtung automatisch anpasst.
  4. Bietet Konfigurationsoptionen für erweiterte Farben (richColors), Schließen-Buttons, Headless-Modus und Begrenzung sichtbarer Meldungen.

Warum das relevant ist

Benachrichtigungen sind ein Kernbestandteil moderner Benutzeroberflächen. Sonner vereinfacht die Implementierung animierter Toasts in React-Projekten und deckt typische Anwendungsfälle wie asynchrone Promise-Zustände und Fehlermeldungen ab.

Einordnung

Funktionsweise und Integration

Sonner positioniert sich als meinungsstarke Toast-Bibliothek für React. Die Implementierung erfordert lediglich das Rendern der <Toaster />-Komponente an zentraler Stelle im Komponentenbaum sowie den Aufruf der Funktion toast() an beliebigen Stellen im Code.

Funktionsumfang

  • Typen und Zustände: Neben simplen Textnachrichten unterstützt Sonner Beschreibungen, Aktionsschaltflächen und native Behandlung von Promises. Für visuelles Feedback stehen Varianten für Erfolg, Information, Warnung und Fehler bereit.
  • Darstellung und Interaktion: Meldungen lassen sich an sechs Bildschirmpositionen verankern (etwa oben oder unten jeweils links, zentriert oder rechts). Die Swipe-Gesten zum Wegwischen passen sich der jeweiligen Position an.
  • Anpassungsmöglichkeiten: Über Props wie richColors lassen sich semantische Hintergrundfarben aktivieren. Zudem lässt sich die Anzahl gleichzeitig sichtbarer Benachrichtigungen beschränken (visibleToasts) oder ein Headless-Modus für eigene Renderings nutzen.

Offen bleibt in der Dokumentationsübersicht, wie tiefgreifend das Styling abseits vorgegebener Themes ohne Headless-Modus angepasst werden kann und welche Framework-Wrapper außerhalb des React-Ökosystems unterstützt werden.

Gefunden in

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 8. November 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Link:Emil Kowalski

    Vaul: Drawer-Komponente für React-Anwendungen

    Vaul ist eine UI-Komponente für React zur Umsetzung von Drawer-Elementen. Entwickelt von Emil Kowalski, bietet die Projektseite Zugang zur Dokumentation, zum Quellcode auf GitHub und zu interaktiven Demos.

    Webentwicklung· Tool

  • Link:cmdk.paco.me

    cmdk: Schnelle, ungestylte Command-Menu-Komponente für React

    cmdk (⌘K) ist eine ungestylte React-Komponente für Befehlsmenüs und barrierefreie Comboboxen. Sie filtert und sortiert Elemente automatisch und bietet eine vollständig zusammensetzbare API. Entwickler können damit flexible Such- und Navigationspaletten nach eigenem Design bauen.

    Webentwicklung· Tool

  • Link:@Alok619308

    Cue Kit: Open-Source-React-Komponenten mit begleitenden KI-Prompts

    Cue Kit bietet über 50 kostenlose UI-Komponenten für React unter MIT-Lizenz. Viele Elemente enthalten neben dem Code auch den ursprünglichen Prompt zur Weiterverarbeitung in KI-Tools. Entwickler können die Bausteine direkt via shadcn-CLI in Webprojekte einbinden.

    Webentwicklung· Tool

  • Link:Maxwell Barvian

    NumberFlow: Abhängigkeitsfreie React-Komponente für animierte Zahlen

    NumberFlow ist eine quelloffene, barrierefreie React-Komponente von Maxwell Barvian, die Zahlenwechsel automatisch und flüssig animiert. Die Bibliothek verzichtet auf externe Abhängigkeiten, nutzt Web-Standards und unterstützt native Formatierungsoptionen über Intl.NumberFormat.

    Webentwicklung· Tool

  • Link:Swami Malode

    Rare UI: Sammlung animierter React-Komponenten

    Rare UI ist eine kostenlose Open-Source-Bibliothek mit über 18 animierten React-Komponenten, die sich über die shadcn CLI installieren lassen.

    Webentwicklung· Tool

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.