Notification Center Open
The bell panel open, tabs, four notifications, one unread, mark all read.
The bell panel open, tabs, four notifications, one unread, mark all read.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Notification Center Open is the bell panel drawn open as a static blueprint, anchored top right inside a page context strip so the positioning reads clearly in a preview. A tabs row separates All, Mentions, and Unread with the live count of 1 pill on Unread. Four notifications follow: Maya Chen mentioned you in Q3 launch plan, Jordan Lee requested your review on Pricing page rewrite, Priya Nair assigned you INV-2026-0341 follow up, and Daniel Ross commented on Design system audit. The first row carries the unread dot and the bg-muted/30 tint. Mark all read sits top right. The footer is the retention promise, notifications older than 30 days are archived automatically, nothing is deleted.
Tabs and notifications are two separate arrays. Rendering the open state as plain markup rather than a Radix popover keeps the panel visible in every screenshot.
Reach for this block on any page that needs a notification flyout, wired to your notifications endpoint with the unread count driving the badge on the bell and the Unread tab pill. Toggle the panel with router state or a useState flag, not a Radix Popover.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace notification center. Other panel shapes:
Tip: the footer line sets expectations without a settings link, add the link once you wire real archival rules.