Notification Center

A comprehensive notification management system with both full and popover variants for different UI contexts.

Usage

notification-center.tsx

import { NotificationCenter } from "@/components/notification-center"

export default function MyComponent() {
  return (
    <NotificationCenter
      variant="popover"
      enableRealTimeUpdates={true}
      updateInterval={30000}
      showFilter={true}
      showMarkAllRead={true}
    />
  )
}

Installation

Install the Notification Center component using your preferred package manager.

npx shadcn@latest add https://rigidui.com/r/notification-center.json

Features

The Notification Center component is packed with powerful features designed to provide an exceptional user experience.

Dual Variants

Choose between full variant for comprehensive displays or popover variant for compact navigation integration.

Read Status Management

Track and manage notification read status with visual indicators and bulk actions.

Priority System

Organize notifications with high, medium, and low priority levels with visual color coding.

Real-time Updates

Optional real-time updates with configurable intervals to keep notifications fresh and current.

Filtering Options

Filter between all notifications or unread-only to help users focus on what matters most.

Notification Management

Complete CRUD operations with mark as read, mark all as read, and delete functionality.

Browser Notifications

Opt-in to receive native browser notifications for new updates, keeping you informed even when the app is in the background.

Props

Prop	Type	Default
`className?`	`string`	`''`
`variant?`	`'full' \| 'popover'`	`'full'`
`notifications?`	`Notification[]`	`undefined`
`fetchNotifications?`	`() => Promise<Notification[]>`	`defaultFetchNotifications`
`onMarkAsRead?`	`(id: string) => Promise<void>`	`defaultMarkAsRead`
`onMarkAllAsRead?`	`() => Promise<void>`	`defaultMarkAllAsRead`
`onDeleteNotification?`	`(id: string) => Promise<void>`	`defaultDeleteNotification`
`onNotificationClick?`	`(notification: Notification) => void`	`undefined`
`enableBrowserNotifications?`	`boolean`	`false`
`maxHeight?`	`string`	`'h-96'`
`showFilter?`	`boolean`	`true`
`showMarkAllRead?`	`boolean`	`true`
`enableRealTimeUpdates?`	`boolean`	`false`
`updateInterval?`	`number`	`30000`
`emptyState?`	`{ title?: string; description?: string }`	`{ title: "No notifications", description: "New notifications will appear here." }`