Notification Inbox
Notification bell with an inbox popover. The bell rings when a new notification arrives, the badge count rolls, and unread items carry an accent bar.
Dependencies
clsxtailwind-merge
Interaction
Harmonic bell ring oscillations on arrival, clipped vertical rolling badge numbers, reverse clip-path popover reveal, natural height grid row expansions with accent background flash, and sequential unread bar sweep clearances.
Props
| Prop | Type | Description |
|---|---|---|
| notifications | { id: string; title: string; body?: string; time: string; read: boolean }[] | List of notifications, newest first. |
| onRead | (id: string) => void | Callback invoked when an unread notification row is clicked. |
| onReadAll | () => void | Callback invoked when the mark all read button is clicked. |
| className | string | Optional CSS classes merged with the root container. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.