Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Notifications Popover
Notifications popover with Bell icon, Badge count, header, Separator, and notification list using w-80 width built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Notifications demand attention—but not full-screen takeovers. This React popover displays Bell icon with Badge count trigger and notification list with timestamps using shadcn/ui and Lucide React icons. Built with Radix UI primitives, Separator, and typography, notification popovers provide activity feed—perfect for social updates, system alerts, activity streams, message previews, or any application where users need quick access to recent events without navigation.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Popover with List
Simple list items
Popover with Divider
Sections with separator
Badge
Notification badge
User Profile Popover
Profile card with details
Dropdown Menu
Menu items
Sheet
Slide-out panel
Questions you might have
React Popover with Steps
Multi-step wizard popover with useState step tracking, Previous/Next navigation, and conditional content for onboarding tours built with shadcn/ui
React Filter Popover
Filter popover with Filter icon, Checkbox options, Labels, and Apply button using w-80 width for data filtering built with shadcn/ui