Components
Loading preview...
This Notification Inbox Popover provides a clean, inbox-style experience for managing alerts directly within the app. Users can toggle between All and Unread notifications using tabs, while each notification is displayed with a relevant Lucide icon, bold styling for unread items, and a timestamp for context. A small dot indicator reinforces which items are new. The design now also includes a “Mark all as read” option in the header, allowing users to quickly clear unread items in one click. Combined with the footer’s “View all notifications” action, this layout balances clarity and efficiency, making it well-suited for SaaS dashboards, admin panels, or productivity apps where streamlined notification handling is essential.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/notification-inbox-popover"use client";
import { NotificationInboxPopover } from "@/components/ui/notification-inbox-popover";
function DemoPage() {
return (
<div className="flex min-h-screen items-center justify-center">
<NotificationInboxPopover />
</div>
);
}
export default DemoPage;