PHPackages awcodes/pounce - 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. awcodes/pounce ActiveLibrary[Utility & Helpers](/categories/utility) awcodes/pounce ============== A global modal/dialog plugin for Filament. v0.2.1(2y ago)91991MITPHPPHP ^8.1CI passing Since Jan 10Pushed 4mo ago1 watchersCompare [ Source](https://github.com/awcodes/pounce)[ Packagist](https://packagist.org/packages/awcodes/pounce)[ Docs](https://github.com/awcodes/pounce)[ GitHub Sponsors](https://github.com/awcodes)[ RSS](/packages/awcodes-pounce/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (10)Versions (5)Used By (0) Pounce ====== [](#pounce) [![Latest Version on Packagist](https://camo.githubusercontent.com/b4de90c7e09fb39a6320dc1f5404c390011e0dcde5d87b4366548db344add37e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6177636f6465732f706f756e63652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/awcodes/pounce)[![Total Downloads](https://camo.githubusercontent.com/5248732d58cfd67fdd76aed373ee4afce7bc747154ceebd2c7dc6c7ee3a07b29/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6177636f6465732f706f756e63652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/awcodes/pounce) This plugin adds a global modal for usage in Filament and is a port of [Wire Elements Modal](https://github.com/wire-elements/modal). ***Please star the original repo if you like this plugin.*** Installation ------------ [](#installation) You can install the package via composer: ``` composer require awcodes/pounce ``` Important If you have not set up a custom theme and are using Filament Panels follow the instructions in the Filament Docs for [creating a custom theme](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme) first. After setting up your theme, add the plugin's views to your `tailwind.config.js` file and run `npm run dev` or `npm run build` to add the plugin styles to your theme. ``` content: [ ... './vendor/awcodes/pounce/resources/**/*.blade.php', ] ``` ### For Panels [](#for-panels) If you are using Filament Panels you need to add the plugin to the panels you wish to use the plugin with. This will add the necessary livewire component to the panel's layout. ``` public function panel(Panel $panel): Panel { return $panel ->plugins([ PouncePlugin::make(), ]); } ``` ### Stand-alone usage [](#stand-alone-usage) If you are using stand-alone Filament packages you will need to manually add the plugin to any layouts where you intend to use it. This should go before the closing `body` tag, and you should only have one instance per page. ``` @livewire('pounce') ``` You can publish the config file with: ``` php artisan vendor:publish --tag="pounce-config" ``` Optionally (not recommended), you can publish the views using ``` php artisan vendor:publish --tag="pounce-views" ``` This is the contents of the published config file: ``` return [ 'modal_max_width' => \Awcodes\Pounce\Enums\MaxWidth::Medium, 'modal_alignment' => \Awcodes\Pounce\Enums\Alignment::MiddleCenter, 'modal_slide_over' => \Awcodes\Pounce\Enums\SlideDirection::None, 'close_modal_on_click_away' => true, 'close_modal_on_escape' => true, 'close_modal_on_escape_is_forceful' => true, 'dispatch_close_event' => false, 'destroy_on_close' => false, ]; ``` Usage ----- [](#usage) ### Creating a modal [](#creating-a-modal) #### With the command line [](#with-the-command-line) For convince, the plugin offers a scaffolding command to create new modals. This will create a class file in `App\Livewire` or your configured Livewire directory. It will also create a view at `resources/views/livewire`. The `--form` flag will scaffold the modal with some defaults for making a modal that uses Filament's form methods. ``` php artisan make:pounce {name?} {--form} {--F|force} ``` #### Manually [](#manually) To manually create a modal you simply need to run the Livewire make command and extend the `PounceComponent` class. ``` php artisan make:livewire CustomModal ``` ``` namespace App\Http\Livewire; use Awcodes\Pounce\PounceComponent; class CustomModal extends PounceComponent { public function render() { return view('livewire.custom-modal'); } } ``` ### Opening and Closing Modals [](#opening-and-closing-modals) Note Pounce uses all the same conventions and usage as Wire Elements Modal, the only thing to be aware of is to open a modal Pounce uses the `pounce` event and to close a modal it uses the `unPounce` event. See [Wire Elements Modal on GitHub](https://github.com/wire-elements/modal/blob/main/README.md#opening-a-modal) for complete usage instructions. ### Modal Alignment [](#modal-alignment) Modals can be aligned to the top, center, or bottom of the screen and to the start, center, or end of the screen. The default alignment is `MiddleCenter`. See [the alignment enum](https://github.com/awcodes/pounce/blob/main/src/Enums/Alignment.php) for all available options. This can also be set globally in the config file. ``` use Awcodes\Pounce\Enums\Alignment; public static function getAlignment(): Alignment { return Alignment::MiddleCenter; } ``` ### Modal Width [](#modal-width) Modal widths can be set using the enum cases found in Filament's `MaxWidth` enum. See [the MaxWidth enum](https://github.com/awcodes/pounce/blob/main/src/Enums/MaxWidth.php) for all available options. This can also be set globally in the config file. ``` use Awcodes\Pounce\Enums\MaxWidth; public static function getMaxWidth(): MaxWidth { return MaxWidth::Medium; } ``` ### Slide Overs [](#slide-overs) By default, all modals are standard pop-up modals. If you wish to use a slide over modal you can set the `getSlideDirection` method to one of the `SlideDirection` enum cases. See [the SlideDirection enum](https://github.com/awcodes/pounce/blob/main/src/Enums/SlideDirection.php) for all available options. This can also be set globally in the config file. ``` use Awcodes\Pounce\Enums\SlideDirection; public static function getSlideDirection(): SlideDirection { return SlideDirection::Left; } ``` To open a normal modal with the slide features you will need to explicitly set the `isSlideOver` method to return `false`. ``` public static function isSlideOver(): bool { return false; } ``` ### Blade Views [](#blade-views) While you are free to use any blade view you wish, the plugin comes with a few pre-made views to get you started. These views have predefined padding and margins to match Filament's UI. ``` {{-- Modal Header --}} // defaults to 'gray' {{-- Modal Heading --}} {{-- Modal Description --}} {{-- Modal Content --}} // accepts start, center, end {{-- Modal Footer --}} ``` Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Adam Weston](https://github.com/awcodes) - [Wire Elements Modal](https://github.com/wire-elements/modal) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 33 — LowBetter than 75% of packages Maintenance52 Moderate activity, may be stable Popularity19 Limited adoption so far Community11 Small or concentrated contributor base Maturity43 Maturing project, gaining track record Bus Factor1 Top contributor holds 53.7% 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. ### Release Activity Cadence Every ~5 days Total 3 Last Release 845d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3596800?v=4)[Adam Weston](/maintainers/awcodes)[@awcodes](https://github.com/awcodes) --- Top Contributors [![awcodes](https://avatars.githubusercontent.com/u/3596800?v=4)](https://github.com/awcodes "awcodes (29 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (17 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (8 commits)") --- Tags filamentfilament-pluginlaravellivewiremodalfilamentalpinejsawcodespounce ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/awcodes-pounce/health.svg) ``` [![Health](https://phpackages.com/badges/awcodes-pounce/health.svg)](https://phpackages.com/packages/awcodes-pounce) ``` ### Alternatives [pboivin/filament-peek Full-screen page preview modal for Filament 253319.6k12](/packages/pboivin-filament-peek)[dotswan/filament-map-picker Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications. 124139.3k2](/packages/dotswan-filament-map-picker)[creagia/filament-code-field A Filamentphp input field to edit or view code data. 58289.3k3](/packages/creagia-filament-code-field)[swisnl/filament-backgrounds Beautiful backgrounds for Filament auth pages 54149.2k6](/packages/swisnl-filament-backgrounds)[tapp/filament-google-autocomplete-field Filament plugin that provides a Google Autocomplete field 3098.1k](/packages/tapp-filament-google-autocomplete-field)[hydrat/filament-table-layout-toggle Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 6292.3k1](/packages/hydrat-filament-table-layout-toggle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)