notification-ui

Render a React notification bell with unread badge and dropdown panel.

3|Updated Dec 14, 2025

Search Tags:#accessibility #react #UI #notification #unread-badge #dropdown #bell-icon

Ready to run

npx skills add https://github.com/Syedaashnaghazanfar/full-stack-todo-app --skill notification-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: notification-ui
Source: https://github.com/Syedaashnaghazanfar/full-stack-todo-app/tree/main/.claude/skills/notification-ui
Command: npx skills add https://github.com/Syedaashnaghazanfar/full-stack-todo-app --skill notification-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about notification-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add a notification badge with unread count to my React app header?▼

Display a bell icon with an unread count badge by integrating the NotificationSystem React component into your app header. The badge shows the number of unread notifications and updates reactively when new alerts arrive, providing users immediate visibility of pending items.

Can I make notifications accessible with keyboard navigation and screen readers?▼

Yes, this notification UI includes ARIA attributes and keyboard-navigable dropdown interactions. Users can tab through the bell icon and notification items, and screen readers announce the unread count and per-item actions, ensuring accessible notification delivery.

How do I implement a dropdown notification panel in React?▼

Render the dropdown component from the NotificationSystem with a fixed 320px width and 400px max height. Pass your notifications data structure and a mark-as-read handler to manage state; the dropdown toggles on bell-icon click and displays items with per-item interaction support.

What visual feedback do new notifications get when they arrive?▼

New notifications trigger a pulse animation on the bell icon to draw user attention. The purple theme emphasizes VERY IMPORTANT tasks, and the unread badge count updates instantly, combining motion and color to ensure timely awareness of critical alerts.

Do I need external dependencies to build a notification UI with React and CSS?▼

No external dependencies are required. The notification UI uses only React components and CSS for the badge styling, pulse animation, and dropdown panel. You provide the notifications data and mark-as-read logic; the Skill handles rendering and interactions.