Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Right Drawer Notifications
A React right drawer notifications panel with unread count badge, scrollable notification list with timestamps, and mark all as read action for activity feeds
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Notification dropdowns hide when you click—drawers let you browse while staying visible. This React right drawer shows notifications with unread indicators, timestamps, and mark all as read. Built with shadcn/ui and Radix UI with Badge and Bell icon—perfect for social apps, collaboration tools, or dashboards with activity feeds.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Right Drawer
Basic right drawer structure
Right Drawer Shopping Cart
Similar scrollable list with items
Left Drawer Notifications
Notifications from left side
Notifications Popover
Compact notifications in popover
Notifications Dialog
Full-screen notifications modal
Notifications Sheet
Alternative notifications panel
Questions you might have
React Right Drawer Shopping Cart
A React right drawer shopping cart with product list, item remove buttons, subtotal/shipping/total calculations, and checkout action for e-commerce sites
React Simple Top Drawer
A React drawer sliding down from the top with header, description, body content, and footer buttons built with shadcn/ui for notifications and quick actions