⚡Vibe Coding

Toast Notifications einrichten

Feedback das nicht im Weg steht

Toasts sind kurze Nachrichten die erscheinen und wieder verschwinden. Gespeichert, Fehler, Erfolgreich. Jede gute App braucht sie und mit Shadcn Sonner sind sie in 5 Minuten eingerichtet.

Pro-Tip — Der schnelle Weg
Nutze Sonner statt des alten Shadcn Toasters. Sonner ist schneller, schoener und hat bessere Animations out of the box.
Seite 1
1

Sonner installieren

Shadcn nutzt Sonner als Toast-Library. Installiere die Komponente und fuege den Toaster in dein Root-Layout ein.

npx shadcn@latest add sonner
2

Toaster einbinden

Fuege den Toaster in dein Root-Layout ein. Er rendert die Toasts am unteren Bildschirmrand. Einmal einrichten, ueberall nutzen.

// app/layout.tsx
import { Toaster } from '@/components/ui/sonner'


export default function Layout({ children }) {
 return (
 <html>
 <body>
 {children}
 <Toaster />
 </body>
 </html>
 )
}
3

Toasts ausloesen

Importiere toast von Sonner und rufe es auf. Verschiedene Typen fuer verschiedene Situationen: success, error, info, warning.

import { toast } from 'sonner'


// Erfolg
toast.success('Gespeichert!')


// Fehler
toast.error('Etwas ist schiefgelaufen')


// Mit Beschreibung
toast.success('Profil aktualisiert', {
 description: 'Deine Aenderungen wurden gespeichert'
})


// Mit Action-Button
toast('Eintrag geloescht', {
 action: {
 label: 'Rueckgaengig',
 onClick: () => undoDelete()
 }
})
4

Promise-Toasts

Zeige Loading, Erfolg und Fehler automatisch an. Perfekt fuer API-Calls wo du dem Nutzer den Status zeigen willst.

toast.promise(saveData(), {
 loading: 'Wird gespeichert...',
 success: 'Erfolgreich gespeichert!',
 error: 'Fehler beim Speichern'
})
5

Anpassungen

Passe Position, Dauer und Styling an. Fuer wichtige Fehler setze die Dauer hoeher oder nutze den 'persistent' Typ der manuell geschlossen werden muss.

<Toaster position='top-right' richColors duration={3000} />
Seite 2
Warum das funktioniert
  • Sofortiges Feedback erhoeht das Vertrauen der Nutzer in die App
  • Promise-Toasts zeigen den kompletten Lifecycle eines API-Calls
  • Undo-Actions im Toast reduzieren versehentliche Loeschungen um 80 Prozent
  • Konsistentes Toast-System macht die App professionell
Tipps
  • Success-Toasts nach 3 Sekunden ausblenden, Fehler nach 5 Sekunden
  • richColors prop macht Success gruen und Error rot automatisch
  • Action-Buttons im Toast fuer Undo-Funktionalitaet sind Gold wert
  • Nicht mehr als einen Toast gleichzeitig zeigen wenn moeglich
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen