Loading...
Loading...
> A comprehensive notification center dropdown with grouped notifications, read/unread states, and action buttons.
1import { NotificationCenter, Notification } from "@/components/ui/notification-center"
1const [notifications, setNotifications] = useState<Notification[]>([2 {3 id: "1",4 type: "info",5 title: "New feature available",6 message: "Check out the new dashboard analytics.",7 timestamp: new Date(Date.now() - 5 * 60 * 1000),8 read: false,9 },10]);1112<NotificationCenter13 notifications={notifications}14 onMarkAsRead={(id) => {15 setNotifications(prev =>16 prev.map(n => n.id === id ? { ...n, read: true } : n)17 );18 }}19 onMarkAllAsRead={() => {20 setNotifications(prev => prev.map(n => ({ ...n, read: true })));21 }}22 onDelete={(id) => {23 setNotifications(prev => prev.filter(n => n.id !== id));24 }}25 onClearAll={() => setNotifications([])}26/>
1type NotificationType = "info" | "success" | "warning" | "error" | "mention";23const notification: Notification = {4 id: "1",5 type: "success", // Sets icon and color6 title: "Payment successful",7 message: "Your subscription has been renewed.",8 timestamp: new Date(),9 read: false,10};
You've used 90% of your storage quota.
1const notification: Notification = {2 id: "1",3 type: "warning",4 title: "Storage almost full",5 message: "You've used 90% of your storage quota.",6 timestamp: new Date(),7 read: false,8 actionLabel: "Upgrade",9 onAction: () => {10 // Handle upgrade click11 // Navigate to upgrade page or show modal12 },13};
1<NotificationCenter2 notifications={notifications}3 groupByDate={true} // Groups by date (default)4 onMarkAsRead={handleMarkAsRead}5/>
You're all caught up!
No new notifications at the moment
1<NotificationCenter2 notifications={[]} // Empty array shows empty state3 onMarkAsRead={handleMarkAsRead}4/>
Click any notification to automatically mark it as read
1<NotificationCenter2 notifications={notifications}3 autoMarkAsRead={true} // Auto-marks as read on click4 onMarkAsRead={handleMarkAsRead}5/>
List scrolls when content exceeds max height
1<NotificationCenter2 notifications={notifications}3 maxHeight={400} // Default: 6004 onMarkAsRead={handleMarkAsRead}5/>
| Prop | Type | Default | Description |
|---|---|---|---|
| notifications | Notification[] | - | Array of notification objects to display |
| onMarkAsRead | (id: string) => void | - | Callback when a notification is marked as read |
| onMarkAllAsRead | () => void | - | Callback when all notifications are marked as read |
| onDelete | (id: string) => void | - | Callback when a notification is deleted |
| onClearAll | () => void | - | Callback when all notifications are cleared |
| maxHeight | number | 600 | Maximum height of the notification list in pixels |
| groupByDate | boolean | true | Group notifications by date (Today, Yesterday, etc.) |
| autoMarkAsRead | boolean | false | Automatically mark notifications as read when clicked |
| className | string | - | Additional CSS classes for the trigger button |