Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | InboxItem[] | DEFAULT_ITEMS | Array of notification items |
onMarkRead | (id: string) => void | undefined | Callback when marking item as read |
onMarkAllRead | () => void | undefined | Callback when marking all as read |
sound | boolean | true | Enable audio tick on interactions |
InboxItem Interface
interface InboxItem {
id: string;
title: string;
body: string;
time: string;
read?: boolean;
}Features
- Wave-Hover Proximity: Moving cursor causes nearby items to lift with cosine falloff
- Dynamic Typography: Hovered items gain weight, brightness, and subtle scale
- Mark All Read: Header action to mark all unread notifications as read
- Unread Dot Animation: Dots spring out with AnimatePresence when marked as read
- Cosine Falloff: Smooth mathematical curve for natural proximity effect
- Glass Morphism: Backdrop blur with light/dark CSS custom properties
- Controlled/Uncontrolled: Works with or without external state management
Usage
import { NotificationInboxPopover } from "@/components/ruixen/notification-inbox-popover";
export default function Example() {
return <NotificationInboxPopover />;
}