shadcn.io is not affiliated with official shadcn/ui
Notifications Inbox Command Menu Block for Radix UI
An inbox's command menu shown open under the bell of a drawn app bar: nine notifications in New and Earlier groups, category chips with unread counts, Enter to mark one read, and Mark all read with an eight-second Undo.
Installation
Overview
Clear an inbox from the keyboard with this notifications command menu for React with Radix UI. It hangs under the bell of the app bar in Chimeloft, an inbox, whose header holds an outline field with its ⌘ K cap, and the app bar is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command with ToggleGroup chips above the field (All, Mentions, Reviews, System, each with its unread count): New and Earlier groups of notifications, each with the initials of its source, a title, the source and category under it and the time, and "New" as a word in a heavier weight. Enter marks the highlighted notification read and moves it to Earlier; Mark all read marks every unread one in the chosen category and shows Undo for eight seconds under the list. The drawn bell's count follows. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same notifications, chip and query. For inboxes, activity feeds and any bell that should be quick to empty.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of an app bar with a bell, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a read notification or a chip in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How does Undo work?
Mark all read moves the chosen category's unread notifications to Earlier, remembers which ones, and shows "Marked 3 read." with an Undo button on a line under the list for eight seconds. Undo marks exactly those notifications unread again; when the eight seconds pass, or when you mark a single notification, the line goes back to its hint. The line keeps its height, and the status line announces both the mark and the undo.
How do the chips and the search combine?
The chip keeps one category (or All) and the search narrows within it by title, source and category. Each chip shows how many of its notifications are unread, so Mentions 2 means two unread mentions, and the count follows every mark. The chips scroll sideways on a phone, and Mark all read acts on the chosen chip only.
How is New shown without colour?
As the word New at the end of the row, in a heavier weight, with the title in a heavier weight too; read notifications show only the time, and the row keeps its height either way. A screen reader hears "new" or "read" after the title.
What stays local, and how do I wire it?
All of it. The nine notifications and their times are constants in START, and a mark changes local state only. In your app load the inbox, send the mark to your API in pick and markAll, and have the undo call the inverse endpoint, or hold the request for the eight seconds and send it only once they pass.
Is it accessible from the keyboard?
Yes. Type to search, Tab reaches the chips, Mark all read and Undo, the arrow keys move through the rows, and Enter marks the highlighted notification read. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.