Notification Components

Dev Design Library indexes 93 notification components from 27 open-source UI libraries, with the most coming from Origin UI, ReUI, OpenSourceUI, FLX UI and Watermelon UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Notification components belong to the Feedback group.

• Animated ListMagic UI · ReactA list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
• Comp 279Origin UI · React
• Halo NotificationCult UI · ReactPolished notification surface for local AnimatePresence use with rim variants and glyph stagger
• Notification Badgetransitions.dev · HTML/CSS
• Basic toast notification.ReUI · ReactBasic toast notification.
• Notification BellRare UI · ReactAn iOS-style notification bell with an unread count badge.
• Notification BellSpectrum UI · ReactA bell icon button with a ring-shake swing, springy unread badge with rolling odometer count, and a pinging dot mode
• Drawer 04 - NotificationsShadcn Space · ReactRight side notifications drawer with an unread badge, All / Unread tabs, mark as read on click, mark all read, and an…
• Apple Notification BannerOpenSourceUI · React
• Notification Slide InKinetics · HTML/CSSBanner drops from the top edge and settles with a spring
• NotificationBoardUI · ReactStatus messages with icons, avatars, and actions.
• Animated ListAnimations (Svelte) · SvelteA component that animates list items with smooth layout transitions, revealing items one by one from top to bottom.
• Animated ListBadtz UI · ReactA sophisticated animation component that creates dynamic column-based transitions with scaling effects. Perfect for…
• Notifications 01Oxbow UI · Astro
• Notification CenterForge UI · ReactBeautifully animated mobile UI showcasing notifications with hover-triggered transitions and customizable content…
• Notification StackSona UI · React
• Notification 1Watermelon UI · React
• Notification centerArc Library · ReactA home for updates with read state, grouped information, and animated disclosure.
• NotificationsFLX UI · ReactBell trigger with an unread badge and an activity list.
• Animated ListVelora UI · ReactLooping feed that springs each item in, newest on top.
• Notification Center PatternHalaska UI · React
• Notification ListSpaceUI · ReactDisplays an interactive feed of incoming notifications with unread indicators, timestamps, and swipe-to-dismiss actions.
• BellSora UI · ReactNotification bell that rattles from its hanger on trigger — a decaying rotation pivot.
• Notif MorphZAYX · React NativeA notification stack that morphs between rows like follows and likes, with springy row height changes.
• Notification BentoD2Studio UI · ReactA four-panel notification bento: a pure-CSS metallic bell on a lit dot-matrix field, recent activity feed, unread…
• Notification StackEaseUI · ReactA deck of notification cards: collapsed to the top card with peeking edges behind it, fanning into a readable list on…
• Glass NotificationOpaline · ReactiOS notification banner plus a stack that fans out on hover.
• Comp 280Origin UI · React
• Toast with upload progress simulationReUI · ReactToast with upload progress simulation
• Dropdown Menu 02 - NotificationsShadcn Space · ReactA sleek notification dropdown with color-coded category icons, activity summaries, and a 'See All' action button.
• Calendar Reminder Notification BannerOpenSourceUI · React
• Notification CenterBoardUI · ReactGrouped activity inbox with tabs and actions.
• Notifications 02Oxbow UI · Astro
• Notification PanelForge UI · ReactA collapsible notification panel displaying recent alerts with icons, timestamps, and smooth animated transitions.
• Notification 2Watermelon UI · React
• NotificationsFLX UI · ReactLeading icon, title with an unread dot indicator, and a trailing timestamp.
• Comp 281Origin UI · React
• Toast with status alert markupReUI · ReactToast with status alert markup
• Popover 03 - NotificationsShadcn Space · ReactNotification list popover with unread badge, type icons, All/Unread tabs, and functional mark-all-read.
• Chat Bubble Notification BannerOpenSourceUI · React
• Notifications 03Oxbow UI · Astro
• Notification 3Watermelon UI · React
• Channel MatrixFLX UI · ReactChannel Matrix for Notifications.
• Comp 282Origin UI · React
• Custom accent border toastReUI · ReactCustom accent border toast
• Switch 12 - Notification MatrixShadcn Space · ReactNotification preferences table with email, push, and SMS switches per event type and a column switch to toggle a whole…
• Delivery Notification BannerOpenSourceUI · React
• Notification 4Watermelon UI · React
• Grouped TogglesFLX UI · ReactGrouped Toggles for Notifications.
• Comp 283Origin UI · React
• Custom invert success toastReUI · ReactCustom invert success toast
• Deploy Notification BannerOpenSourceUI · React
• Notification ListWatermelon UI · React
• Digest FrequencyFLX UI · ReactDigest Frequency for Notifications.
• Comp 284Origin UI · React
• Custom invert error toast with detailsReUI · ReactCustom invert error toast with details
• Email Notification BannerOpenSourceUI · React
• Dashboard previewFLX UI · ReactA layered app dashboard with a floating notification.
• Comp 285Origin UI · React
• Custom invert info toast with avatarReUI · ReactCustom invert info toast with avatar
• Incoming Call Notification BannerOpenSourceUI · React
• NotificationsFLX UI · ReactA fanned stack of notification cards.
• Comp 286Origin UI · React
• Custom invert warning toast with countdownReUI · ReactCustom invert warning toast with countdown
• Payment Notification BannerOpenSourceUI · React
• Comp 287Origin UI · React
• Multi-action invert toast with avatar groupReUI · ReactMulti-action invert toast with avatar group
• Toast Notification BannerOpenSourceUI · React
• Comp 288Origin UI · React
• Toast with close button on top-rightReUI · ReactToast with close button on top-right
• Comp 289Origin UI · React
• Toast with custom iconReUI · ReactToast with custom icon
• Comp 290Origin UI · React
• Toast notification with description.ReUI · ReactToast notification with description.
• Comp 291Origin UI · React
• Custom integration toastReUI · ReactCustom integration toast
• Comp 292Origin UI · React
• Updatable toast with IDReUI · ReactUpdatable toast with ID
• Comp 293Origin UI · React
• Toast positionsReUI · ReactToast positions
• Comp 294Origin UI · React
• Toast variants with colored iconsReUI · ReactToast variants with colored icons
• Comp 295Origin UI · React
• Toast duration optionsReUI · ReactToast duration options
• Comp 296Origin UI · React
• Toast with action buttonReUI · ReactToast with action button
• Comp 297Origin UI · React
• Promise toast with loading stateReUI · ReactPromise toast with loading state
• Comp 298Origin UI · React
• Toast with custom close and cancel buttonsReUI · ReactToast with custom close and cancel buttons
• Comp 299Origin UI · React
• Toast with custom rich contentReUI · ReactToast with custom rich content
• Comp 300Origin UI · React

Libraries with notification components

• Origin UI
• ReUI
• OpenSourceUI
• FLX UI
• Watermelon UI

Related categories

• React Notification Components
• Tailwind CSS Notification Components
• Animated Notification Components
• shadcn/ui Notification Components
• Feedback Components
• Badge Components
• Spinner Components
• Progress Components
• Alert Components
• Chip Components
• Progress Bar Components
• Empty State Components
• Status Indicator Components
• Skeleton Components
• Banner Components
• Typing Indicator Components
• Progress Circle Components
• Error State Components
• Success Animation Components
• Scroll Progress Components