Tailwind CSS Notification Components

Dev Design Library indexes 88 Tailwind CSS notification components from 22 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. Every library in this list styles its components with Tailwind CSS utility classes. 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
• 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
• 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
• 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 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.
• 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 Tailwind CSS notification components

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

Related categories

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