Notification Center

A complete activity inbox with three animated filter tabs, grouped timelines, unread states, avatar and status visuals, optional inline actions, mark-all-read behavior, and a composed empty state.

Notifications

4 unread

Livia Saris

Livia mentioned you

2m

Can you review the new empty state before we ship the dashboard?

Workspace backup is ready

18m

The July 23 backup finished successfully and is ready to download.

You joined Project Sea

1h

Maria added you as an editor. You now have access to all project files.

Jaydon Aminoff

Jaydon requested your review

Mon

Pull request #284 updates the notification preferences flow.

Security check completed

Sun

No exposed credentials or vulnerable dependencies were found.

Preview deployment failed

Sat

The build stopped while validating the application routes.

Installation

You can add the notification center application block using our CLI or manually:

Dark mode ready — this component follows BoardUI semantic tokens automatically. Set up theme switching.

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add notification-center

Filtering

The center owns its active filter by default. Use defaultTab for the initial view, or combine tab and onTabChange when the surrounding product needs controlled state.

<NotificationCenter notifications={notifications} defaultTab="mentions"/> {/* Controlled filtering */}<NotificationCenter notifications={notifications} tab={activeTab} onTabChange={setActiveTab}/>

Notification data and actions

Every item declares its filter category and timeline group. Add an avatar or a semantic status icon, set unread, and attach small actions. Action presses mark that item read and report both IDs through onAction.

const notification = { id: "deploy-failed", category: "system", // mentions | system | activity group: "Earlier this week", title: "Preview deployment failed", description: "The build stopped while validating routes.", timestamp: "Sat", unread: true, status: "error", // neutral | information | success | error actions: [ { id: "retry", label: "Retry", variant: "primary" }, { id: "logs", label: "View logs", variant: "secondary" }, ],};