Shadcn.io is not affiliated with official shadcn/ui
Mark All Read Notification Block
A mark all as read notification block for React and Next.js with unread count badge, blue dot indicators, animated bulk read action, and AnimatePresence transitions built with shadcn/ui and Tailwind CSS
Clear your notification inbox with this satisfying mark-all-read block for React and Next.js. Features a header with live unread count, a Mark all read Button that triggers AnimatePresence dot removal animations, and mixed read/unread notification items with blue dot indicators and staggered Framer Motion entrances. Built with TypeScript, shadcn/ui Button components, Framer Motion for smooth transitions, and Tailwind CSS. Perfect for SaaS dashboards, team inboxes, and notification management flows.
Mark All Read Notification Block preview
Installation
Related Components
Inbox Panel
Full notification inbox with tab filtering
Bell Dropdown
Bell icon dropdown notification menu
Empty State
Empty notifications all-caught-up state
Search Results
Search within notification items
Account Blocks
User account and profile components
Dashboard Blocks
Dashboard layout components
FAQ
Was this page helpful?
Sign in to leave feedback.
Scheduled Maintenance Notification Block
A scheduled maintenance notification block for React and Next.js with date and time window, affected services list, expected downtime, subscribe option, and amber warning accent built with shadcn/ui and Tailwind CSS
Mention Notification List Block
An at-mention notification list block for React and Next.js with channel context, thread preview, view action buttons, and staggered entrance animations built with shadcn/ui and Tailwind CSS