React Notification Center: Inbox, Glocke und Toasts

Ein React Notification Center ist die Glocke in deiner Kopfleiste und die Inbox dahinter: ein Zähler für Ungelesenes, eine Liste mit dem, was passiert ist, ein Weg, Einträge als gelesen zu markieren, und einer, sie wieder loszuwerden. Die meisten Beispiele für ein React Notification Panel hören bei einem Popover mit einer Liste auf. Dann kommen echte Daten: vierzig Zeilen, die gruppiert werden müssen, eine Erwähnung, die unter Abrechnungsereignissen untergeht, eine Einladung, die einen Button zum Annehmen braucht, ein Smartphone, auf dem das Popover den halben Bildschirm verdeckt. Dieser Guide zeigt, wann ein Ereignis in die Inbox gehört und wann in einen Toast, welche Props im Notification Center von Wingo UI zählen und wie du den Lesestatus mit dem Server abgleichst. Danach geht es um Smartphones, Barrierefreiheit und Echtzeit-Updates.

Was ist ein React Notification Center?

Es ist ein dauerhafter Verlauf der Ereignisse in deiner App, den du über eine Glocke öffnest. Eine Inbox für In-App-Benachrichtigungen erledigt vier Aufgaben, die eine einfache Liste nicht abdeckt:

1. Zählen. Ein Badge an der Glocke mit der Zahl ungelesener Einträge, gedeckelt (99+), bei null ausgeblendet.
2. Sortieren. Filter-Tabs (Alle, Ungelesen, Erwähnungen) und Tagesgruppen (Heute, Gestern, dann das Datum), das Neueste oben.
3. Handeln. Eine Zeile öffnen, eine Einladung direkt annehmen, als gelesen oder ungelesen markieren, entfernen.
4. Aktualisieren. Neue Zeilen gleiten herein, die Glocke reagiert, ältere Seiten laden beim Scrollen nach.

Wann braucht ein Ereignis einen Toast, die Inbox oder beides?

Nimm einen Toast als Rückmeldung zu etwas, das der Nutzer gerade getan hat, und die Inbox für alles, was er später noch brauchen könnte. Courier formuliert in seinem Guide zu Toasts in Web-Apps (opens in a new tab) eine Regel, die du dir merken solltest: Jedes wichtige Ereignis kommt ins Notification Center, und nur ein Teil davon bekommt zusätzlich einen Toast. GitHub geht noch weiter: Die Barrierefreiheits-Richtlinien von Primer (opens in a new tab) sehen bei Toasts erhebliche Probleme für die Barrierefreiheit und empfehlen stattdessen Banner und Dialoge. Schon deshalb sollte nichts ausschließlich in einem Toast stehen.

Welcher Toast der richtige ist, klärt der Vergleich der Sonner-Alternativen; die Beispiele unten nutzen den kostenlosen Toast von Wingo UI.

Welche Optionen gibt es für ein React Notification Center?

Entweder nutzt du einen gehosteten Dienst, der Benachrichtigungen für dich speichert und zustellt, oder eine UI-Komponente, die du mit deinen eigenen Daten fütterst. Stand Oktober 2026:

Nimm Novu oder Knock, wenn du Zustellung über E-Mail, Push und In-App samt Benachrichtigungseinstellungen pro Nutzer brauchst: Das ist ein Backend-Problem, das keine Komponente löst. Nimm eine Quellcode-Komponente, wenn deine App Benachrichtigungen schon speichert.

Welche Props braucht das Notification Center?

Ein Array und die Callbacks, die es ändern. notifications ist absteigend sortiert, das Neueste zuerst. Jeder Eintrag hat eine id, einen title, ein createdAt (Date, String oder Zahl) und optional body, read, type, einen avatar mit name oder ein icon mit tone, ein href und actions direkt in der Zeile.

npx wingo-ui@latest add notification-center

"use client";

import { useState } from "react";
import { CreditCard } from "lucide-react";
import { NotificationCenter, type NotificationItem } from "@/components/ui/notification-center";

const initial: NotificationItem[] = [
  {
    id: "n1",
    type: "mention",
    name: "Sophia Lee",
    title: "Sophia Lee hat dich in „Angebot Acme Corp“ erwähnt",
    body: "@Emma Carter, kannst du den Rabatt prüfen, bevor wir es verschicken?",
    createdAt: "2026-10-19T10:42:00",
    href: "/quotes/Q-2026-118",
  },
  {
    id: "n2",
    icon: <CreditCard />,
    tone: "danger",
    title: "Die Zahlung für deinen Pro-Plan ist fehlgeschlagen",
    body: "Die Karte mit der Endung 4821 wurde abgelehnt.",
    createdAt: "2026-10-19T08:15:00",
    actions: [{ label: "Erneut versuchen", onSelect: () => fetch("/api/billing/retry", { method: "POST" }) }],
  },
];

export function TopbarNotifications() {
  const [items, setItems] = useState(initial);

  return (
    <NotificationCenter
      notifications={items}
      onRead={(ids) => setItems((prev) => prev.map((n) => (ids.includes(n.id) ? { ...n, read: true } : n)))}
      onUnread={(ids) => setItems((prev) => prev.map((n) => (ids.includes(n.id) ? { ...n, read: false } : n)))}
      onDismiss={(id) => setItems((prev) => prev.filter((n) => n.id !== id))}
      settingsHref="/settings/notifications"
      locale="en-US"
    />
  );
}

Einträge mit type: "mention" erscheinen im Tab „Mentions“, und @Name wird in Titeln und Texten hervorgehoben, sofern sie Strings sind. Gibt das onSelect einer Aktion ein Promise zurück, dreht sich der Spinner auf ihrem Button, bis das Promise abgeschlossen ist. Zeilen mit href werden über den Router-Link gerendert, den du mit LinkProvider oder der Prop linkComponent setzt. So funktioniert next/link, ohne dass die Komponente es importiert.

Öffne in der Demo die Glocke und drück dann „Simulate a notification“: Die Glocke schwingt, und die Zeile gleitet herein.

Wie bleiben Gelesen, Ungelesen und Entfernen mit dem Server synchron?

Das Panel aktualisiert sich sofort und ruft deinen Handler auf; du speicherst die Änderung. Die Komponente hält diesen lokalen Zustand, bis deine notifications-Daten nachgezogen haben. So leuchtet bei einem langsamen Request nie ein Punkt wieder auf. onReadAll gehört zum Button im Header; ohne diesen Handler bekommt onRead alle ungelesenen ids. onDismiss feuert erst, wenn die Zeile zusammengeklappt ist, und genau dann entfernst du sie aus deinen Daten.

const save = (body: object) =>
  fetch("/api/notifications", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });

<NotificationCenter
  notifications={items}
  onRead={(ids) => save({ ids, read: true })}
  onUnread={(ids) => save({ ids, read: false })}
  onReadAll={() => save({ all: true, read: true })}
  onDismiss={(id) => {
    setItems((prev) => prev.filter((n) => n.id !== id));
    fetch(`/api/notifications/${id}`, { method: "DELETE" });
  }}
  hasMore={hasMore}
  onLoadMore={loadOlder}
/>

hasMore hängt eine Zeile „Load more“ an, die auch von selbst lädt, sobald sie in den sichtbaren Bereich scrollt. Gibt onLoadMore ein Promise zurück, zeigt die Zeile einen Spinner, bis es abgeschlossen ist.

Soll die Glocke Ungelesenes oder Ungesehenes zählen?

Das Badge zählt standardmäßig ungelesene Einträge. Manche Apps zählen lieber Ungesehenes: Der Zähler springt beim Öffnen des Panels auf null, auch wenn nichts gelesen wurde. Knock bietet dieselbe Wahl über badgeCountType. Hier nimmt count jede beliebige Zahl:

const [seenAt, setSeenAt] = useState(0);
const unseen = items.filter((n) => !n.read && new Date(n.createdAt).getTime() > seenAt).length;

<NotificationCenter notifications={items} count={unseen} onOpenChange={(open) => open && setSeenAt(Date.now())} />

Wie funktionieren Filter-Tabs und Tagesgruppen?

filters ersetzt die Standard-Tabs „All“, „Unread“ und „Mentions“. Jeder Tab hat einen value, ein label, optional eine filter-Funktion, ein badge und einen eigenen Empty State. Ein Tab mit value: "unread" zeigt den laufenden Zähler für Ungelesenes auch ohne badge.

filters={[
  { value: "all", label: "Alle" },
  { value: "billing", label: "Abrechnung", filter: (n) => n.type === "billing", badge: unreadBilling },
  { value: "mentions", label: "Erwähnungen", filter: (n) => n.type === "mention", emptyTitle: "Keine Erwähnungen" },
]}

Bei weniger als zwei Filtern verschwindet die Tab-Leiste. groupByDay (standardmäßig an) ergänzt Sticky-Überschriften: Heute, Gestern, die Wochentage dieser Woche, danach Datumsangaben, alles in der locale. Zeiten lauten etwa „5 min ago“, kommen aus Intl.RelativeTimeFormat und aktualisieren sich jede Minute, solange das Panel offen ist. Relative Zeiten werden erst nach dem Mount berechnet, und der Server gibt Uhrzeiten aus, deshalb gibt es keinen Hydration Mismatch.

Wie funktioniert ein Notification Panel auf dem Smartphone?

Unter 768px wird das Panel zu einem Bottom Sheet in voller Höhe mit Tabs über die ganze Breite, denn ein 400px breites Popover an einer kleinen Glocke lässt auf einem 390px breiten Bildschirm keinen Platz. Zieh den Griff nach unten, um es zu schließen. Wisch eine Zeile nach links, um sie zu entfernen, oder nach rechts, um den Lesestatus umzuschalten: Eine farbige Ebene folgt deinem Finger, die Geste greift ab einem Viertel der Zeilenbreite oder bei einem schnellen Flick, und das Smartphone gibt einen kurzen haptischen Tick, wo der Browser Vibration unterstützt. Das ⋯-Menü ist auf Touch-Geräten immer sichtbar, Wischen ist also nie der einzige Weg. responsive={false} behält das Popover, swipeActions={false} schaltet das Wischen ab. Die Geste ist dieselbe wie im Guide zu Swipe to Delete in React, und das Sheet folgt dem Muster aus dem Guide zum React Bottom Sheet.

Ist das Notification Center barrierefrei?

Das Label der Glocke enthält den Zähler („Notifications, 3 unread“) und ändert sich mit ihm. Neue Benachrichtigungen, die eintreffen, während die Komponente gemountet ist, werden über eine Live-Region im Modus „polite“ angesagt („New notification: ...“), ältere Seiten aus „Load more“ dagegen nicht als Neuigkeit. Bei offenem Panel springen Pfeil nach unten oder Pos1 zur ersten Zeile, Pfeil nach oben und unten wechseln zwischen den Zeilen, Ende springt zur letzten, Enter öffnet eine Zeile, und Escape schließt das Panel und gibt den Fokus an die Glocke zurück. Das Zeilenmenü erscheint bei Hover und bei Tastaturfokus. shortcut="alt+n" öffnet das Panel von überall, und alle Texte stecken zum Übersetzen in labels.

Wie ergänze ich Echtzeit-Benachrichtigungen und Toasts?

Streame neue Benachrichtigungen in dasselbe Array und zeig nur für die dringenden einen Toast, solange das Panel geschlossen ist. Dieses Beispiel nutzt Server-Sent Events mit dem EventSource des Browsers; ein WebSocket funktioniert genauso. Bind <Toaster /> einmal in deinem Root Layout ein.

"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { NotificationCenter, type NotificationItem } from "@/components/ui/notification-center";
import { toast } from "@/components/ui/toast";

export function LiveNotifications({ initial }: { initial: NotificationItem[] }) {
  const [items, setItems] = useState(initial);
  const [open, setOpen] = useState(false);
  const openRef = useRef(false);

  useEffect(() => {
    const source = new EventSource("/api/notifications/stream");
    source.onmessage = (event) => {
      const item = JSON.parse(event.data) as NotificationItem;
      setItems((prev) => (prev.some((n) => n.id === item.id) ? prev : [item, ...prev]));
      // die Inbox bekommt es immer; ein Toast nur für Erwähnungen bei geschlossenem Panel
      if (item.type === "mention" && !openRef.current) {
        toast(item.title, { action: { label: "Ansehen", onClick: () => setOpen(true) } });
      }
    };
    return () => source.close();
  }, []);

  return (
    <NotificationCenter
      notifications={items}
      open={open}
      onOpenChange={(next) => {
        openRef.current = next;
        setOpen(next);
      }}
      onRead={(ids) => setItems((prev) => prev.map((n) => (ids.includes(n.id) ? { ...n, read: true } : n)))}
      onDismiss={(id) => setItems((prev) => prev.filter((n) => n.id !== id))}
      linkComponent={Link}
    />
  );
}

Die Prüfung auf Duplikate ist wichtig: Ein Stream, der sich neu verbindet, kann dasselbe Ereignis zweimal senden.

Kann ich nur die Glocke nutzen oder eine ganze Seite mit Benachrichtigungen?

Beides geht. Die kostenlose Notification Bell ist eine eigenständige React Notification Bell: ein Badge im iOS-Stil, dessen Ziffern rollen, ein Schwingen, wenn der Zähler steigt, und eine Trefferfläche von 44px auf Touch-Geräten. Nutz sie mit deinem eigenen Panel, oder übergib sie dem Center als trigger, zusammen mit deinem Zähler für Ungelesenes. Für eine Seite /notifications oder ein Panel in der Sidebar rendert NotificationList dieselben Tabs, Gruppen, Zeilen und „Load more“, nur ohne Glocke.

import { NotificationBell } from "@/components/ui/notification-bell";
import { NotificationList } from "@/components/ui/notification-center";

<NotificationCenter notifications={items} trigger={<NotificationBell count={unread} size={40} />} />

<NotificationList title="Benachrichtigungen" notifications={items} className="rounded-3xl border border-border" />

Was sind die typischen Fallen bei einem Notification Center?

• Ereignisse nur als Toast. Wenn ein Ereignis wichtig ist, gehört es auch in die Inbox. Toasts verschwinden nach Ablauf ihrer Zeit.
• Die Zeile entfernen, bevor sie zusammengeklappt ist. Entfern sie in onDismiss, das nach der Animation läuft, nicht in deinem eigenen Swipe-Handler.
• Instabile ids. Lesestatus und Entfernen hängen an der id. Erzeug sie auf dem Server, nie aus dem Array-Index.
• Den ersten Fetch ansagen. Die Komponente behandelt die erste nicht leere Liste als Ausgangsstand, damit ein Seitenaufruf nicht vierzig Titel vorliest. Übernimm dieses Verhalten, wenn du ein eigenes Center baust.

Wie baue ich es in mein Projekt ein?

Führ npx wingo-ui@latest add notification-center aus. Die CLI kopiert den Quellcode nach components/ui, ergänzt die Komponenten, Hooks und Helfer von Wingo UI, die der Code importiert, und installiert @radix-ui/react-popover, motion und lucide-react. Das Notification Center ist eine Pro-Komponente (Preise); die Notification Bell und der Toast sind kostenlos. Weitere Deep Dives zu einzelnen Komponenten findest du in der Kategorie Komponenten-Guides, und der Guide zu React-Formularkomponenten wendet dieselben Regeln für Touch, Tastatur und Screenreader auf jedes Formularelement an.

Häufige Fragen

Was ist der Unterschied zwischen einem Toast und einem Notification Center?

Ein Toast bestätigt, was der Nutzer gerade getan hat, und verschwindet nach ein paar Sekunden. Ein Notification Center hält fest, was passiert ist, auch während der Nutzer weg war, damit er es später lesen und darauf reagieren kann. Schick jedes wichtige Ereignis in die Inbox und nur die dringenden zusätzlich als Toast.

Soll die Glocke ungelesene oder ungesehene Benachrichtigungen zählen?

Ein Zähler für Ungelesenes sinkt, sobald eine Benachrichtigung geöffnet oder als gelesen markiert wird; ein Zähler für Ungesehenes springt auf null, sobald das Panel aufgeht. Bei Knock wählst du das für die Glocke über badgeCountType. Das Notification Center von Wingo UI zählt standardmäßig Ungelesenes, und die Prop count nimmt jede beliebige Zahl, etwa einen Zähler für Ungesehenes.

Wie bekomme ich Echtzeit-Benachrichtigungen in eine React Inbox?

Öffne in einem Effect einen WebSocket oder einen Server-Sent-Events-Stream, setz jede neue Benachrichtigung an den Anfang deines States und gib das Array an die Inbox weiter. Die Komponente animiert die neue Zeile, lässt die Glocke schwingen und kündigt die Benachrichtigung Screenreadern an; was gesendet wird, entscheidet dein Server.

Brauche ich Novu oder Knock für ein Notification Center?

Nur wenn ein gehosteter Dienst Benachrichtigungen über mehrere Kanäle wie E-Mail, Push und In-App zustellen und speichern soll. Wenn dein Backend Benachrichtigungen schon speichert, reicht eine UI-Komponente, die ein Array nimmt, und du behältst dein eigenes Datenmodell.

Ist das Notification Center von Wingo UI kostenlos?

Das Notification Center ist eine Pro-Komponente. Die eigenständige Notification Bell und der Toast sind kostenlos.