PHPackages sanzgrapher/swippable-notification - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. sanzgrapher/swippable-notification ActiveLibrary[Utility & Helpers](/categories/utility) sanzgrapher/swippable-notification ================================== A Filament plugin for swipe-to-close notifications. By Narayan Dhakal (sanzgrapher) 81.2k↑140%2[3 issues](https://github.com/sanzgrapher/filament-swippable-notification/issues)PHP Since Feb 3Pushed 4mo agoCompare [ Source](https://github.com/sanzgrapher/filament-swippable-notification)[ Packagist](https://packagist.org/packages/sanzgrapher/swippable-notification)[ RSS](/packages/sanzgrapher-swippable-notification/feed)WikiDiscussions main Synced 3w ago READMEChangelogDependenciesVersions (1)Used By (0) Swippable Notification ====================== [](#swippable-notification) A Filament package that adds swipe-to-close functionality to **all Filament notifications** - both popup toast notifications and database notifications. Swipe left or right to dismiss with a smooth animation. [![Swippable Notification](./resources/swippable-notification.png)](./resources/swippable-notification.png) Features -------- [](#features) - Swipe notifications to dismiss them (80px threshold) - Full mobile support with touch events - Desktop support with mouse drag - Works on BOTH popup and database notifications - Visual cursor feedback (grab cursor while dragging) - Zero configuration needed - Auto-initializes on all notifications - Smooth animations and transitions - Non-intrusive - respects existing Filament styling Installation ------------ [](#installation) ``` composer require sanzgrapher/swippable-notification ``` Usage ----- [](#usage) Register the plugin in your Filament `PanelProvider`: ``` use Sanzgrapher\SwippableNotification\SwippableNotification; class AdminPanelProvider extends PanelProvider { public function panel(Panel $panel): Panel { return $panel ->default() ->id('admin') ->path('admin') // ... other configuration ... ->plugins([ SwippableNotification::make(), ]); } } ``` That's it! All Filament notifications will now support swipe-to-close functionality. Notification Types Supported ---------------------------- [](#notification-types-supported) ### 1. Popup Toast Notifications [](#1-popup-toast-notifications) Standard Filament notifications that appear as toasts: ``` Notification::make() ->title('Success!') ->body('Your action was completed successfully.') ->success() ->send(); ``` ### 2. Database Notifications [](#2-database-notifications) Filament database notifications in the notification modal: ``` use Filament\Notifications\Notification; $recipient = auth()->user(); Notification::make() ->title('Important Update') ->body('You have a new message') ->success() ->persistent() ->sendToDatabase($recipient); ``` How It Works ------------ [](#how-it-works) The package automatically: 1. Detects all Filament notification elements (`.fi-no-notification` for popups) 2. Detects database notifications inside modals (`[x-data*="notificationComponent"]`) 3. Attaches touch and mouse event listeners 4. Tracks swipe/drag distance in real-time with visual cursor feedback 5. Closes notifications when swiped > 80px 6. Monitors for dynamically added notifications 7. Applies smooth animations during the swipe How to Swipe ------------ [](#how-to-swipe) **On Desktop:** - Hover over notification → see **grab cursor** 🖐️ - Click and drag left or right → notification follows - Drag > 80px → notification closes smoothly - Drag < 80px → snaps back **On Mobile:** - Swipe left or right → works just like desktop drag - Swipe > 80px → notification closes - Swipe < 80px → snaps back Visual Feedback --------------- [](#visual-feedback) - **Grab cursor**: Shows when hovering over notification (indicates it's swipeable) - **Grabbing cursor**: Shows while actively dragging - **While dragging**: Notification follows your finger/cursor with opacity fade - **Closing**: Smooth slide-out animation with fade - **Dragging class**: `.swippable-notification-dragging` applied to element - **Closing class**: `.swippable-notification-closing` applied to element Customization ------------- [](#customization) ### Adjust Swipe Sensitivity [](#adjust-swipe-sensitivity) To change the swipe threshold, edit `init-swippable.js`: ``` threshold: 80, // pixels needed to trigger close (increase for less sensitive) ``` ### Opacity Fade Speed [](#opacity-fade-speed) Adjust how quickly the notification fades while dragging: ``` this.el.style.opacity = `${Math.max(0, 1 - Math.abs(this.currentX) / 300)}`; // Adjust 300 for different fade speeds ``` Browser Support --------------- [](#browser-support) - Chrome/Edge (latest) - Firefox (latest) - Safari (latest) - Mobile browsers (iOS Safari, Chrome Mobile, Android Firefox) Troubleshooting --------------- [](#troubleshooting) ### Notifications aren't swiping [](#notifications-arent-swiping) 1. Clear your browser cache 2. Make sure the plugin is registered in your `PanelProvider` 3. Check that JavaScript is enabled 4. Verify notifications are rendering with correct Filament classes ### Database notifications not swiping [](#database-notifications-not-swiping) Make sure you're using Filament's `DatabaseNotification` class, not Laravel's standard notifications. ### Cursor not changing to grab [](#cursor-not-changing-to-grab) Make sure your CSS is loading properly. Check browser console for any CSS errors. ### Conflicts with other packages [](#conflicts-with-other-packages) This package is designed to be non-invasive and work alongside other Filament plugins. It only adds event listeners to notifications without modifying their structure. Examples -------- [](#examples) ### Popup Toast Notification (Swipeable) [](#popup-toast-notification-swipeable) ``` use Filament\Notifications\Notification; Notification::make() ->title('Success!') ->body('Your record was saved.') ->success() ->send(); ``` ### Database Notification (Swipeable) [](#database-notification-swipeable) ``` use Filament\Notifications\DatabaseNotification; DatabaseNotification::create([ 'user_id' => auth()->id(), 'title' => 'New Message', 'body' => 'You have received a new message.', ]); ``` Both will have swipe-to-close functionality automatically! License ------- [](#license) MIT --- **Author:** Narayan Dhakal (sanzgrapher) **Email:** ### Health Score 24 — LowBetter than 31% of packages Maintenance43 Moderate activity, may be stable Popularity28 Limited adoption so far Community7 Small or concentrated contributor base Maturity12 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://avatars.githubusercontent.com/u/101717917?v=4)[Narayan Dhakal](/maintainers/sanzgrapher)[@sanzgrapher](https://github.com/sanzgrapher) --- Top Contributors [![sanzgrapher](https://avatars.githubusercontent.com/u/101717917?v=4)](https://github.com/sanzgrapher "sanzgrapher (2 commits)") --- Tags filamentfilamentphplaravelpackagephp ### Embed Badge ![Health badge](/badges/sanzgrapher-swippable-notification/health.svg) ``` [![Health](https://phpackages.com/badges/sanzgrapher-swippable-notification/health.svg)](https://phpackages.com/packages/sanzgrapher-swippable-notification) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)