Notification Center
A comprehensive notification management system with both full and popover variants for different UI contexts.
Installation
Install the Notification Center component using your preferred package manager.
Usage
The Notification Center component provides a complete notification management system. It supports both full-featured displays and compact popover variants, with priority-based organization, filtering, and comprehensive notification lifecycle management.
Discover Its 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.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | '' | Additional class names for styling |
| variant | 'full' | 'popover' | 'full' | The display variant of the component - full for complete view or popover for compact trigger |
| notifications | Notification[] | undefined | Static notifications array. If provided, will be used instead of fetchNotifications |
| fetchNotifications | () => Promise<Notification[]> | defaultFetchNotifications | Function to fetch notifications asynchronously |
| onMarkAsRead | (id: string) => Promise<void> | defaultMarkAsRead | Callback function called when a notification is marked as read |
| onMarkAllAsRead | () => Promise<void> | defaultMarkAllAsRead | Callback function called when all notifications are marked as read |
| onDeleteNotification | (id: string) => Promise<void> | defaultDeleteNotification | Callback function called when a notification is deleted |
| onNotificationClick | (notification: Notification) => void | undefined | Callback function called when a notification is clicked |
| maxHeight | string | 'h-96' | Maximum height class for the notification list container |
| showFilter | boolean | true | Whether to show the filter toggle button |
| showMarkAllRead | boolean | true | Whether to show the mark all as read button |
| enableRealTimeUpdates | boolean | false | Whether to enable automatic real-time updates |
| updateInterval | number | 30000 | Interval in milliseconds for real-time updates (when enabled) |
| emptyState | { title?: string; description?: string } | { title: "No notifications", description: "New notifications will appear here." } | Custom empty state configuration |