PHPackages andreia/filament-ui-switcher - 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. [Admin Panels](/categories/admin) 4. / 5. andreia/filament-ui-switcher ActiveLibrary[Admin Panels](/categories/admin) andreia/filament-ui-switcher ============================ Add a modal with options to switch between different UI layouts and styles (colors, fonts, font sizes). v1.0.4(1mo ago)233.8k↓28.1%7[3 issues](https://github.com/andreia/filament-ui-switcher/issues)MITPHPPHP ^8.4|^8.3|^8.2CI passing Since Nov 2Pushed 1mo agoCompare [ Source](https://github.com/andreia/filament-ui-switcher)[ Packagist](https://packagist.org/packages/andreia/filament-ui-switcher)[ Docs](https://github.com/andreia/filament-ui-switcher)[ RSS](/packages/andreia-filament-ui-switcher/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (5)Dependencies (12)Versions (9)Used By (0) Filament UI Switcher Plugin =========================== [](#filament-ui-switcher-plugin) [![Latest Version on Packagist](https://camo.githubusercontent.com/a29c19207c9928a7fb3fbd346596c8ac7a315f8849b628c3a108316454a66d4e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616e64726569612f66696c616d656e742d75692d73776974636865722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/andreia/filament-ui-switcher)[![Total Downloads](https://camo.githubusercontent.com/26f10aa5dcaea6218a5d9588ce6b26b0d3fd4a78a5bcc8b7502a29460c7dc7c4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f616e64726569612f66696c616d656e742d75692d73776974636865722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/andreia/filament-ui-switcher) Switch between the available Filament layouts with a customizable UI settings slideover modal accessible from a ⚙️ icon in the topbar. [![Filament UI Switcher Demo Video](https://raw.githubusercontent.com/andreia/filament-ui-switcher/main/docs/demo_video.jpg)](https://www.youtube.com/watch?v=aEBp4mYrej8) Features -------- [](#features) **Customization Options:** - **Primary Color** - Choose from the predefined colors or add your custom colors - **Font Family** - Select from 6 popular Google Fonts (Inter, Poppins, Roboto, DM Sans, Nunito Sans, Public Sans) - **Font Size** - Adjust base font size (12-20px) - **Layout** - Switch between Sidebar, Compact Sidebar, and Topbar navigation - **Mode (optional)** - Display Filament's mode switcher (dark, light, and system) - **Reset All** - Quickly reset all customizations to default values with a single click **Storage Options:** - **Session Storage** (default) - Preferences stored in user session - **Database Storage** - Persist preferences per user in database Requirements ------------ [](#requirements) - PHP 8.2 or higher - Laravel 11.x or 12.x - Filament 4.1+ or 5.x - Livewire 3.x or 4.x > **Note:** While the plugin technically works with Filament 4.0, the "No Topbar" layout option requires Filament 4.1+. Other layout options work on all Filament 4.x versions. Installation ------------ [](#installation) ### 1. Install via Composer [](#1-install-via-composer) ``` composer require andreia/filament-ui-switcher ``` The package will auto-register via Laravel's package discovery. ### 2. Publish Assets [](#2-publish-assets) This package uses Filament's asset management system. After installing, you need to publish the assets: ``` php artisan filament:assets ``` This will publish the CSS assets to `public/css/andreia/filament-ui-switcher/` where they will be automatically loaded by Filament and cached by your browser for better performance. > **Note:** If you update the package, run `php artisan filament:assets` again to get the latest assets. ### 3. Publish Config [](#3-publish-config) You can customize the colors, fonts, and more with the config file: ``` # Publish config php artisan vendor:publish --tag=filament-ui-switcher-config # Publish translations php artisan vendor:publish --tag=filament-ui-switcher-translations ``` This will create a `config/ui-switcher.php` file where you can customize: **Default Preferences:** ``` 'defaults' => [ 'font' => 'Inter', // Default font family 'color' => '#6366f1', // Default primary color 'layout' => 'sidebar', // Default layout 'font_size' => 16, // Default font size in pixels 'density' => 'default', // Default UI density ], ``` **Available Fonts:**Add or remove Google Fonts from the font picker: ``` 'fonts' => [ 'Inter', 'Poppins', 'Public Sans', 'DM Sans', 'Nunito Sans', 'Roboto', // Add any Google Font you want: // 'Montserrat', // 'Open Sans', ], ``` **Custom Colors:**Customize the color palette shown in the color picker: ``` 'custom_colors' => [ '#6366f1', '#3b82f6', '#0ea5e9', '#10b981', '#22c55e', '#84cc16', '#eab308', '#f59e0b', '#f97316', '#ef4444', '#ec4899', '#8b5cf6', // Add your brand colors: // '#yourBrandColor', ], ``` **Custom UI icon:**Customize the UI icon modal trigger: ``` 'icon' => 'heroicon-o-cog-6-tooth', ``` **Font Size Range:**Set the min and max values for the font size slider: ``` 'font_size_range' => [ 'min' => 12, // Minimum font size in pixels 'max' => 20, // Maximum font size in pixels ], ``` **Available Layouts:**Control which layout options are available to users: ``` 'layouts' => [ 'sidebar', // Full sidebar with icons and labels 'sidebar-collapsed', // Collapsed sidebar (icons only) 'sidebar-no-topbar', // Sidebar without topbar (Filament v4.1+) 'topbar', // Top navigation bar ], ``` ### 3. Publish View (Optional) [](#3-publish-view-optional) If you want to customize the view: ``` # Publish view (optional) php artisan vendor:publish --tag=filament-ui-switcher-views ``` ### 4. Register the Plugin [](#4-register-the-plugin) Add the plugin to your Filament Panel Provider (e.g., `app/Providers/Filament/AdminPanelProvider.php`): ``` use Andreia\FilamentUiSwitcher\FilamentUiSwitcherPlugin; public function panel(Panel $panel): Panel { return $panel ->id('admin') ->path('admin') // ... other config ->plugin(FilamentUiSwitcherPlugin::make()); } ``` #### Customize Icon Position [](#customize-icon-position) By default, the settings icon appears before the user menu (`USER_MENU_BEFORE`) on topbar. You can customize where the icon appears using any Filament render hook: ``` use Andreia\FilamentUiSwitcher\FilamentUiSwitcherPlugin; use Filament\View\PanelsRenderHook; ->plugin( FilamentUiSwitcherPlugin::make() ->iconRenderHook(PanelsRenderHook::TOPBAR_END) ) ``` **Available render hooks for the icon:** - `PanelsRenderHook::USER_MENU_BEFORE` (default) - Before the user menu - `PanelsRenderHook::USER_MENU_AFTER` - After the user menu - `PanelsRenderHook::TOPBAR_START` - Start of topbar - `PanelsRenderHook::TOPBAR_END` - End of topbar - `PanelsRenderHook::GLOBAL_SEARCH_BEFORE` - Before global search - `PanelsRenderHook::GLOBAL_SEARCH_AFTER` - After global search - Or any custom render hook you've defined #### Enable Mode Switcher (Optional) [](#enable-mode-switcher-optional) By default, the mode switcher is hidden. If you want to include Filament's native mode switcher (to switch between light, dark, and system) in the settings modal, enable it using the `->withModeSwitcher()` method: ``` ->plugin( FilamentUiSwitcherPlugin::make() ->withModeSwitcher() ) ``` ### 5. Add the UI switcher path in your theme file [](#5-add-the-ui-switcher-path-in-your-theme-file) Filament recommends developers create a custom theme to better support plugin's additional TailwindCSS classes. After you have created your [custom theme](https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme), add the UI swicher vendor directory to your theme's `theme.css` file usually located in `resources/css/filament/admin/theme.css`: ``` /* ... */ @source '../../../../vendor/andreia/filament-ui-switcher'; ``` and execute: ``` npm run build ``` That's it! A ⚙️ settings icon will now appear in your topbar. Appearance ---------- [](#appearance) [![Filament UI Switcher Screenshot](https://raw.githubusercontent.com/andreia/filament-ui-switcher/main/docs/screenshot.png)](https://raw.githubusercontent.com/andreia/filament-ui-switcher/main/docs/screenshot.png) [![Filament UI Switcher Modal](https://raw.githubusercontent.com/andreia/filament-ui-switcher/main/docs/ui_switcher_modal.jpg)](https://raw.githubusercontent.com/andreia/filament-ui-switcher/main/docs/ui_switcher_modal.jpg) Usage ----- [](#usage) ### Resetting Preferences [](#resetting-preferences) The settings modal includes a reset button in the header that allows users to quickly restore all customizations to their default values. When clicked, it will reset: - Primary color - Font family - Font size - Layout - Mode (dark/light/system) All preferences will be restored to the values defined in your `config/ui-switcher.php` file under the `defaults` key. Configuration ------------- [](#configuration) The config file (`config/ui-switcher.php`) allows you to choose storage driver: ``` return [ /* |-------------------------------------------------------------------------- | Storage Driver |-------------------------------------------------------------------------- | Where to store UI preferences. | Options: 'session' (default), 'database' */ 'driver' => 'session', /* |-------------------------------------------------------------------------- | Database Column |-------------------------------------------------------------------------- | Only used if driver = 'database'. | The column on the users table where preferences are stored as JSON. */ 'database_column' => 'ui_preferences', ]; ``` Database Storage (Optional) --------------------------- [](#database-storage-optional) If you want to persist preferences per user across sessions and devices: ### Step 1: Publish and Run Migration [](#step-1-publish-and-run-migration) ``` php artisan vendor:publish --tag=filament-ui-switcher-migrations php artisan migrate ``` This adds a `ui_preferences` JSON column to your `users` table. ### Step 2: Add HasUiPreferences Trait to User Model [](#step-2-add-hasuipreferences-trait-to-user-model) Update your `User` model adding the `HasUiPreferences` trait and a `'ui_preferences' => 'array'` cast, like so: ``` use Andreia\FilamentUiSwitcher\Models\Traits\HasUiPreferences; class User extends Authenticatable { use HasUiPreferences; protected function casts(): array { return [ // ... 'ui_preferences' => 'array', ]; } } ``` ### Step 3: Update Config [](#step-3-update-config) Set the driver to database in `config/ui-switcher.php`: ``` 'driver' => 'database', ``` Now preferences are saved per-user and persist across logins! Programmatic Access ------------------- [](#programmatic-access) You can also access and modify preferences programmatically: ``` use Andreia\FilamentUiSwitcher\Support\UiPreferenceManager; // Get a preference $font = UiPreferenceManager::get('ui.font', 'Inter'); // Set a preference UiPreferenceManager::set('ui.color', '#10b981'); ``` If using database storage with the `HasUiPreferences` trait: ``` // Get user's preference $font = auth()->user()->getUiPreference('ui.font', 'Inter'); // Set user's preference auth()->user()->setUiPreference('ui.color', '#10b981'); ``` Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Contributions are welcome! Please feel free to submit a Pull Request. Security -------- [](#security) If you discover any security related issues, please email instead of using the issue tracker. Credits ------- [](#credits) - [Andréia Bohner](https://github.com/andreia) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. --- Made with ❤️ for the Filament community ### Health Score 51 — FairBetter than 96% of packages Maintenance86 Actively maintained with recent releases Popularity34 Limited adoption so far Community12 Small or concentrated contributor base Maturity58 Maturing project, gaining track record Bus Factor1 Top contributor holds 63.6% 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 ~35 days Total 5 Last Release 57d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/5d0402fb770bca016dd6ee6a925501e0224783f1e5907788aee0ba7bc31c01ee?d=identicon)[andreiabohner](/maintainers/andreiabohner) --- Top Contributors [![andreia](https://avatars.githubusercontent.com/u/38911?v=4)](https://github.com/andreia "andreia (14 commits)")[![alkoumi](https://avatars.githubusercontent.com/u/10585943?v=4)](https://github.com/alkoumi "alkoumi (6 commits)")[![ahmedshaharyarX](https://avatars.githubusercontent.com/u/176009823?v=4)](https://github.com/ahmedshaharyarX "ahmedshaharyarX (2 commits)") --- Tags laraveluiswitcherlayoutdashboardcustomizationfilament ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/andreia-filament-ui-switcher/health.svg) ``` [![Health](https://phpackages.com/badges/andreia-filament-ui-switcher/health.svg)](https://phpackages.com/packages/andreia-filament-ui-switcher) ``` ### Alternatives [awcodes/filament-quick-create Plugin for Filament Admin that adds a dropdown menu to the header to quickly create new items. 246177.6k7](/packages/awcodes-filament-quick-create)[guava/filament-knowledge-base A filament plugin that adds a knowledge base and help to your filament panel(s). 206120.5k1](/packages/guava-filament-knowledge-base)[a2insights/filament-saas Filament Saas for A2Insights 161.1k](/packages/a2insights-filament-saas)[caresome/filament-neobrutalism-theme A neobrutalism theme for FilamentPHP admin panels 303.2k](/packages/caresome-filament-neobrutalism-theme)[craft-forge/filament-language-switcher Zero-config language switcher for Filament admin panels. Automatically scans available translations, renders dropdown with country flags, persists selection via sessions. 1016.4k](/packages/craft-forge-filament-language-switcher)[geo-sot/filament-env-editor Access .env file though Filament admin panel 2432.3k1](/packages/geo-sot-filament-env-editor) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)