Notification Center
An inbox popover with an unread badge, tabs, mark read or unread, archive, inline actions and an empty state.
Overview
The bell in the top bar, fully built. The unread badge pops when the count changes and the bell rings twice when there’s something new. The panel groups notifications into All, Mentions and Unread, shows relative times, and keeps unread items tinted with a dot.
Each notification can carry an inline action, such as Reply or View usage, that also marks it read. Hover or focus reveals read/unread and archive controls (always visible on touch). Mark all as read clears the badge in one move, and empty tabs show a calm, specific message.
Use it in any multi-user product. Feed it from your realtime source. It is fully controlled through notices and onChange.
When to use
- A single interaction you want to feel finished, dropped into an existing screen.
When not to use
- A whole page layout: look at Sections or Templates.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/notification-center.jsonnpx shadcn@latest add https://sundaeui.dev/r/notification-center.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/notification-center.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/notification-center.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy notification-center.tsx into components/sundae/.
- Make sure Tailwind scans that folder (v4 detects it automatically; v3 needs it in `content`).
- Import the component and use it as shown below.
Usage
import { NotificationCenter } from '@/components/sundae/notification-center'
<NotificationCenter notices={notices} onChange={setNotices} />Props
| Prop | Type | Default |
|---|---|---|
notices*{ id, title, body?, at, read?, kind?, actor?, action? }. | Notice[] | — |
onChange*Called on read, unread, archive and mark-all. | (notices) => void | — |
defaultOpenOpen on mount. | boolean | — |
Accessibility
- The bell’s label includes the unread count. The panel is a labelled dialog with real tabs.
- Row controls are labelled buttons that appear on focus as well as hover, and are always visible on touch devices.
- Escape and outside clicks close the panel.
Customization
- Swap the blue unread dot and red badge for your accent colours.
- Remove nc-ring if the bell animation is too much for your product.
FAQ
- Is Notification Center free?
- Notification Center is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Notification Center?
- Run npx shadcn@latest add https://sundaeui.dev/r/notification-center.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Notification Center support keyboard and screen readers?
- The bell’s label includes the unread count. The panel is a labelled dialog with real tabs. Row controls are labelled buttons that appear on focus as well as hover, and are always visible on touch devices.
- Does Notification Center respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All components →- Pro
Team Members
Components · Understated - Pro
Sheet Drawer
Components · Refined Avatar Stack
Components · Refined- Pro
AI Composer
Components · Understated Fold Accordion
Components · UnderstatedToast Stack
Components · Refined