## Notification Center (S—030)

An inbox popover with an unread badge, tabs, mark read or unread, archive, inline actions and an empty state.

- URL: https://sundaeui.dev/components/notification-center
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/notification-center.json`
- Tags: dashboard, tailwind, saas, inbox, activity-feed, react, popover, notifications

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.

### Usage

```tsx
import { NotificationCenter } from '@/components/sundae/notification-center'

<NotificationCenter notices={notices} onChange={setNotices} />
```

### Props

- `notices` (`Notice[]`, required): { id, title, body?, at, read?, kind?, actor?, action? }.
- `onChange` (`(notices) => void`, required): Called on read, unread, archive and mark-all.
- `defaultOpen` (`boolean`): Open on mount.

### 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.