PHPackages hammadzafar05/filament-mobile-preset - 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. hammadzafar05/filament-mobile-preset ActiveLibrary hammadzafar05/filament-mobile-preset ==================================== Mobile-first UI/UX defaults for Filament panels: bottom navigation, thumb-reachable actions, slide-over modals and larger touch targets. 5.x-dev(today)00MITPHPPHP ^8.2CI passing Since Jul 28Pushed todayCompare [ Source](https://github.com/hammadzafar05/filament-mobile-preset)[ Packagist](https://packagist.org/packages/hammadzafar05/filament-mobile-preset)[ Docs](https://github.com/hammadzafar05/filament-mobile-preset)[ RSS](/packages/hammadzafar05-filament-mobile-preset/feed)WikiDiscussions 5.x Synced today READMEChangelog (1)Dependencies (11)Versions (1)Used By (0) Filament Mobile Preset ====================== [](#filament-mobile-preset) ![Mobile Preset — every control within reach of one thumb](https://raw.githubusercontent.com/hammadzafar05/filament-mobile-preset/5.x/art/banner-light.jpg) [![Latest Version on Packagist](https://camo.githubusercontent.com/feae3a858272916857948d9fa772a853b8d8a86b257aa2344a3fb54b852d9e65/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f68616d6d61647a6166617230352f66696c616d656e742d6d6f62696c652d7072657365742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/hammadzafar05/filament-mobile-preset)[![GitHub Tests Action Status](https://camo.githubusercontent.com/8bc72ff09f07d0ae10c67d58c89fb602d09d3d67cec459ed213d071f7d82cde8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f68616d6d61647a6166617230352f66696c616d656e742d6d6f62696c652d7072657365742f74657374732e796d6c3f6272616e63683d352e78266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/hammadzafar05/filament-mobile-preset/actions?query=workflow%3Atests+branch%3A5.x)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/716f76fb2b2f16330bc9b38e2b8bfb68184aa66088c2a44f68db1d3fa6de7c14/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f68616d6d61647a6166617230352f66696c616d656e742d6d6f62696c652d7072657365742f6669782d636f64652d7374796c652e796d6c3f6272616e63683d352e78266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/hammadzafar05/filament-mobile-preset/actions?query=workflow%3A%22Fix+code+style%22+branch%3A5.x)[![Total Downloads](https://camo.githubusercontent.com/06896533405ccc7fbd96cbec0a2b0f8c86aa89da5544819f201a6052e1040b77/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f68616d6d61647a6166617230352f66696c616d656e742d6d6f62696c652d7072657365742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/hammadzafar05/filament-mobile-preset) Mobile-first defaults for Filament panels, in one plugin. Adds a bottom navigation bar, pulls action buttons into thumb reach, opens modals as slide-overs, removes "Create & create another", and enlarges touch targets. Every default is a single fluent call away from being turned off. Requirements ------------ [](#requirements) PHP 8.2+, and Filament **4.11.5+ or 5.6.5+**. Those floors are deliberate. Filament 4.0.0–4.11.4 and 5.0.0–5.6.4 carry four published advisories, including an unauthenticated temporary file upload on auth pages ([CVE-2026-48500](https://github.com/advisories)). A plain `^4.0 || ^5.0` would have advertised support for every one of those versions, and Composer blocks them at install time anyway. The plugin's own code works fine across both majors — the floors are about what it is reasonable to tell someone to install. Installation ------------ [](#installation) ``` composer require hammadzafar05/filament-mobile-preset ``` Register it on a panel: ``` use Hammadzafar05\FilamentMobilePreset\FilamentMobilePresetPlugin; public function panel(Panel $panel): Panel { return $panel // ... ->plugin(FilamentMobilePresetPlugin::make()); } ``` That's it. **No custom theme, no Tailwind `@source` line, no npm build** — the stylesheet is plain CSS injected into the panel's ``. What it does ------------ [](#what-it-does) DefaultMechanismApplies on desktop?Bottom navigation barRegisters [`mobile-bottom-nav`](https://github.com/hammadzafar05/mobile-bottom-nav) on the panelNo — hidden above 1024pxTables stack into labelled cards`Table::stackedOnMobile()`No — table again above 640pxNo "Create & create another"`CreateAction::createAnother(false)` + `CreateRecord::disableCreateAnother()`YesModal footer actions right-aligned`Action::modalFooterActionsAlignment(Alignment::End)`YesForm actions right-aligned`BasePage::formActionsAlignment(Alignment::End)`YesModals open as slide-overs`Action::slideOver()` — confirmation dialogs stay centredYesPage header + table actions right-alignedCSSNo — below 1024px only44px touch targetsCSS `@media (pointer: coarse)`Touch devices only`viewport-fit=cover` for iOS safe areasPatches the viewport meta tagn/aFilament's own alignment APIs are server-side and have no knowledge of viewport width, so the options that use them apply at every screen size. Right-aligned modal footers and form actions are a mainstream convention, so this is a deliberate trade rather than an oversight. Everything that would be wrong on a desktop is done in a `@media` query instead. ### The safe-area fix [](#the-safe-area-fix) Filament renders `` with no `viewport-fit=cover`, which makes `env(safe-area-inset-*)` resolve to `0` on iOS. This preset emits a second viewport meta so bottom-anchored UI clears the iPhone home indicator. ### Content Security Policy [](#content-security-policy) The stylesheet is injected inline, so a panel using this preset needs `style-src 'unsafe-inline'`— the same allowance [`mobile-bottom-nav`](https://github.com/hammadzafar05/mobile-bottom-nav) already requires, and the reason neither package needs a custom theme or a build step. It requires **no `script-src` allowance**. The safe-area fix is a meta tag rather than the one-line script it could have been, precisely so that installing this package does not oblige your app to permit inline scripts. A test asserts the injected head contains no `bottomNav(MobileBottomNav::make()->fromNavigation(5)) // or ->bottomNav(false) ->thumbAlignment(false) ->slideOverModals(false) ->createAnother() // restores "Create & create another" ``` MethodDefaultEffect`bottomNav(bool|MobileBottomNav)``true`Registers the bottom bar. Pass a configured instance to customise it, or `false` to skip. Skipped automatically if you already registered `MobileBottomNav` yourself.`stackedTables(bool)``true`Renders table rows as stacked, labelled cards below 640px instead of scrolling sideways.`thumbAlignment(bool)``true`Right-aligns page header, form and modal footer actions.`slideOverModals(bool)``true`Opens action modals as slide-overs.`createAnother(bool)``false`Restores the "Create & create another" action.Touch-target sizing and the safe-area fix are unconditional — an accessibility baseline and a bug fix, not preferences. ### The topbar hamburger [](#the-topbar-hamburger) The bottom bar's "More" button and the topbar hamburger both call `$store.sidebar.open()`, so showing both is redundant. The hamburger is hidden for you — but by [`mobile-bottom-nav`](https://github.com/hammadzafar05/mobile-bottom-nav) (1.4+), not by this package, which is why `^1.4` is required. Hiding it safely means knowing whether the bar actually rendered — it bails out for guests, for tenanted panels with no resolved tenant, and for panels whose navigation items have no icons — and whether the More button is enabled. Both facts only exist at render time inside that package. Deciding it from here would strand users behind a bar that never drew. To keep the hamburger, tell the bottom bar: ``` FilamentMobilePresetPlugin::make() ->bottomNav(MobileBottomNav::make()->hideSidebarToggle(false)) ``` ### Stacked tables use Filament's 640px breakpoint [](#stacked-tables-use-filaments-640px-breakpoint) `stackedOnMobile()` switches to cards below `sm` (640px) and back to a real table above it, so a tablet in the 640–1023px band still gets a table while the bottom bar is visible. That is Filament's own breakpoint, left alone deliberately. A resource can opt out per table: ``` public static function table(Table $table): Table { return $table->stackedOnMobile(false); } ``` ### Slide-overs enable sticky modal chrome [](#slide-overs-enable-sticky-modal-chrome) Filament derives sticky modal headers and footers from the slide-over flag, so `slideOverModals()` turns both on. That is what you want on a phone; it is also visible on desktop. ### Re-enabling create-another on one page [](#re-enabling-create-another-on-one-page) `CreateRecord::disableCreateAnother()` writes to a static property shared by every create page. To bring it back for a single page, redeclare the property on that page class: ``` class CreatePost extends CreateRecord { protected static bool $canCreateAnother = true; } ``` > Under Laravel Octane, `formActionsAlignment` and `canCreateAnother` are process-global statics set from a per-panel hook, so a second panel in the same worker inherits them. Under PHP-FPM this cannot happen. Customising the stylesheet -------------------------- [](#customising-the-stylesheet) ``` php artisan vendor:publish --tag="filament-mobile-preset-views" ``` Then edit `resources/views/vendor/filament-mobile-preset/styles.blade.php`. 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](.github/SECURITY.md) on how to report security vulnerabilities. Credits ------- [](#credits) - [Hammad Zafar](https://github.com/hammadzafar05) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 35 — LowBetter than 77% of packages Maintenance100 Actively maintained with recent releases Popularity0 Limited adoption so far Community9 Small or concentrated contributor base Maturity29 Early-stage or recently created project Bus Factor1 Top contributor holds 85.2% 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 Unknown Total 1 Last Release 0d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/cb305128a9f62d2162d369040344284cbe80b071c657dcfeddbbe446bbf609a7?d=identicon)[hammadzafar](/maintainers/hammadzafar) --- Top Contributors [![hammadzafar05](https://avatars.githubusercontent.com/u/75698921?v=4)](https://github.com/hammadzafar05 "hammadzafar05 (23 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (2 commits)") --- Tags laravelmobileresponsivefilamentfilament-pluginfilamentphpuxhammadzafar05filament-mobile-preset ### Code Quality TestsPest Static AnalysisPHPStan, Rector Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/hammadzafar05-filament-mobile-preset/health.svg) ``` [![Health](https://phpackages.com/badges/hammadzafar05-filament-mobile-preset/health.svg)](https://phpackages.com/packages/hammadzafar05-filament-mobile-preset) ``` ### Alternatives [rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3914.8k](/packages/rawilk-profile-filament-plugin)[backstage/mails View logged mails and events in a beautiful Filament UI. 16321.5k](/packages/backstage-mails)[croustibat/filament-jobs-monitor Background Jobs monitoring like Horizon for all drivers for FilamentPHP 274333.4k9](/packages/croustibat-filament-jobs-monitor)[marcelweidum/filament-passkeys Use passkeys in your filamentphp app 6649.5k2](/packages/marcelweidum-filament-passkeys)[stephenjude/filament-jetstream A Laravel starter kit built with Filament inspired by Jetstream. 17760.2k3](/packages/stephenjude-filament-jetstream)[stephenjude/filament-two-factor-authentication Filament Two Factor Authentication: Google 2FA + Passkey Authentication 84215.9k9](/packages/stephenjude-filament-two-factor-authentication) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)