Northwind CRM · Home
Good morning, Emma
Collected in Sep$38,400.00+12% vs August
Open quotes123 new this week
Active clients1,284+38 this month
Feedback
v1.0.0Added in 1.0.0
The app's notification inbox: a bell with the unread count and a panel with filter tabs, day groups, inline actions and swipe to dismiss.
Click the bell (or press its shortcut) and the panel grows out of it with All / Unread / Mentions tabs, the Unread tab counting live. Notifications sit under sticky day labels (Today, Yesterday, weekdays, then dates) with relative times that refresh every minute. Click a row to open it: it turns read, follows its link and the panel closes. Inline buttons (accept an invite, retry a payment) spin while their promise runs. The ⋯ menu on each row (on hover or focus with a mouse, always visible on touch) marks it read or unread or dismisses it, and the row collapses out. "Mark all as read" clears every dot at once and the red count on the bell scales away; when a new notification arrives the bell swings and the row slides in, and screen readers hear it through a polite live region. Keyboard: Tab into the panel, Down or Home jumps to the first row, Up / Down move between rows, Home / End jump, Enter opens, Escape closes and focus returns to the bell. The last row loads more by itself when it scrolls into view. On a phone the panel is a full-height bottom sheet: swipe a row left to dismiss it (a red Dismiss layer follows your finger) or right to toggle read, with a haptic tick where supported; drag the handle down to close. NotificationList (same file) is the panel without the bell, for a full inbox page or a sidebar panel.
npx wingo-ui@latest add notification-centerPro item: the CLI needs a Pro account. See plans
Open the bell, then add a notification: the bell swings and the row slides in. On a phone, swipe rows.
side="bottom" align="end" max=99 hasMore=false responsive=true swipeActions=true ringOnNew=true