Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Unread Notifications List Block

An unread notifications list block for React and Next.js with toggle filter, blue dot indicators, click-to-mark-as-read interactions, and staggered animations built with shadcn/ui and Tailwind CSS

Manage notification overload with this unread notifications list block for React and Next.js. Features an unread-only toggle filter with live count, six notification items with blue dot indicators that disappear on click to mark as read, and a clean inbox-zero empty state. Built with TypeScript, shadcn/ui Switch and Button components, Framer Motion staggered entrance animations, and Tailwind CSS. Perfect for SaaS dashboards, team collaboration tools, and messaging platforms.

Unread Notifications List Block preview

Loading...
Scroll to load preview

Installation

Install
Pro block

FAQ

Last updated on March 24, 2026

Was this page helpful?

Sign in to leave feedback.