Dashboard
Click the bell icon in the mock navbar above to view notifications. Notice the unread indicator and mark-as-read functionality.
Overview
A staple of application layouts. The NotificationCenter manages an array of notifications, displaying an unread badge if necessary.
When clicked, it uses framer-motion to smoothly reveal a styled dropdown menu. It handles complex internal state like marking individual items or all items as read, and includes custom scrollbars for long notification lists.
Usage
import { NotificationCenter } from "@/components/creative/notification-center"
export default function Navbar() {
const notifications = [
{
id: "1",
title: "New Message",
description: "You have a new message from Jane.",
time: "2m ago",
unread: true
}
]
return (
<nav className="flex justify-between p-4 border-b">
<div className="font-bold">Dashboard</div>
<NotificationCenter
notifications={notifications}
onMarkAllRead={() => console.log('Marked all as read')}
/>
</nav>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { NotificationCenter } from "@/components/creative/notification-center";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { NotificationCenter } from "@/components/creative/notification-center";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<NotificationCenter
notifications{/* value */}
onMarkAllRead{/* value */}
onNotificationClick="example"
/>
</div>
);
}