notification-ui

What problem does it solve?

Apps often struggle to surface timely notifications in a way that's visually prominent and accessible. This skill delivers a compact, interactive notification UI featuring a bell icon with an unread count badge and a dropdown panel to centralize alerts.

Core Features & Use Cases

• Bell icon with an unread count badge for quick awareness.
• Pulse animation to draw attention when new notifications arrive.
• Dropdown panel with a fixed width of 320px and a max height of 400px for compact viewing.
• Per-item interactions, including mark-as-read and an empty state when there are no notifications.
• Purple theme emphasis for VERY IMPORTANT notifications to aid prioritization.
• Accessible, keyboard-navigable UI with ARIA attributes.

Quick Start

To start, integrate the NotificationSystem into your app header and render the BellIcon with the dropdown. Provide a notifications data structure and a handler to mark items as read. Style with the included CSS classes and adapt as needed.