PHPackages manusiakemos/filament-material-3 - 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. manusiakemos/filament-material-3 ActiveLibrary[Admin Panels](/categories/admin) manusiakemos/filament-material-3 ================================ A Material 3 Design theme plugin for Laravel Filament v4 and v5 v1.0.1(4mo ago)113MITCSSPHP ^8.2 Since Feb 18Pushed 4mo agoCompare [ Source](https://github.com/manusiakemos/filament-material-3)[ Packagist](https://packagist.org/packages/manusiakemos/filament-material-3)[ Docs](https://github.com/manusiakemos/filament-material-3)[ RSS](/packages/manusiakemos-filament-material-3/feed)WikiDiscussions main Synced 3mo ago READMEChangelog (2)Dependencies (5)Versions (4)Used By (0) Filament Material 3 Theme Plugin ================================ [](#filament-material-3-theme-plugin) A Material 3 Design theme plugin for Laravel Filament v5, bringing Google's latest design system to your admin panels. [![Latest Version on Packagist](https://camo.githubusercontent.com/81bcd8ecd0e7f9293e7649ed3f16d50e36617fc0699f841961f1a857bad4e80e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d616e757369616b656d6f732f66696c616d656e742d6d6174657269616c2d332e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/manusiakemos/filament-material-3)[![Total Downloads](https://camo.githubusercontent.com/ffb8c30a618c2df43fd49adbaacabc6a62a4ab9082e888b50d7aa052642a7aa2/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d616e757369616b656d6f732f66696c616d656e742d6d6174657269616c2d332e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/manusiakemos/filament-material-3)[![License](https://camo.githubusercontent.com/909c0387eec435fa54da00c8ced10db2a86ee1ae07391ac525e855e30ccb90cc/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6d616e757369616b656d6f732f66696c616d656e742d6d6174657269616c2d332e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/manusiakemos/filament-material-3) This plugin applies the Material 3 Design System to your Filament admin panels, providing a modern, accessible, and visually appealing interface with comprehensive color palettes and built-in dark mode support. Features -------- [](#features) - **Multiple Color Themes**: Choose from predefined themes (Blue, Green, Red, Yellow) - **Type-Safe Configuration**: Uses PHP Enum for color theme selection - **Fluent API Only**: Configure directly in your panel provider - **Material 3 Color System**: Full implementation of Material 3 tonal palettes - **Dark Mode**: Built-in dark mode support (uses Filament's dark mode config) - **Filament v5 Compatibility**: Built specifically for Filament v5 Installation ------------ [](#installation) Install the package via Composer: ``` composer require manusiakemos/filament-material-3 ``` Add the theme CSS entries to your `vite.config.js`: ``` import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js', 'vendor/manusiakemos/filament-material-3/resources/css/material-3-blue.css', 'vendor/manusiakemos/filament-material-3/resources/css/material-3-green.css', 'vendor/manusiakemos/filament-material-3/resources/css/material-3-red.css', 'vendor/manusiakemos/filament-material-3/resources/css/material-3-yellow.css', ], refresh: true, }), tailwindcss(), ], }); ``` Build your assets: ``` pnpm run build ``` Usage ----- [](#usage) ### Basic Setup [](#basic-setup) Register the plugin in your Filament panel provider (e.g., `app/Providers/Filament/AdminPanelProvider.php`): ``` use Manusiakemos\FilamentMaterial3\FilamentMaterial3Plugin; public function panel(Panel $panel): Panel { return $panel // Use Filament's built-in config for dark mode, fonts, etc. ->darkMode() ->font('Roboto') ->plugin(FilamentMaterial3Plugin::make()); } ``` ### Color Themes [](#color-themes) ThemeEnum ValueDescriptionFilament ColorBlue`ColorTheme::Blue`Blue (default)BlueGreen`ColorTheme::Green`GreenLimeRed`ColorTheme::Red`Red/OrangeRedYellow`ColorTheme::Yellow`Yellow/AmberAmber### Theme Selection [](#theme-selection) Use the fluent API in your panel provider: ``` use Manusiakemos\FilamentMaterial3\FilamentMaterial3Plugin; use Manusiakemos\FilamentMaterial3\Enums\ColorTheme; use Filament\Support\Colors\Color; // Default blue theme $panel->plugin(FilamentMaterial3Plugin::make()); // Green theme using enum (recommended) $panel->plugin( FilamentMaterial3Plugin::make() ->colorTheme(ColorTheme::Green) ); // Red theme using string $panel->plugin( FilamentMaterial3Plugin::make() ->colorTheme('red') ); // Yellow theme with custom color overrides $panel->plugin( FilamentMaterial3Plugin::make() ->colorTheme(ColorTheme::Yellow) ->colors([ 'primary' => Color::Amber, ]) ); // Blue theme with all options $panel->plugin( FilamentMaterial3Plugin::make() ->colorTheme(ColorTheme::Blue) ->primaryColor('#769CDF') ->colors([ 'primary' => Color::Blue, ]) ); ``` ### Complete Example [](#complete-example) ``` use Manusiakemos\FilamentMaterial3\FilamentMaterial3Plugin; use Manusiakemos\FilamentMaterial3\Enums\ColorTheme; use Filament\Support\Colors\Color; public function panel(Panel $panel): Panel { return $panel ->default() ->id('admin') ->path('admin') ->login() // Filament's built-in config ->darkMode() ->font('Inter') // Material 3 theme plugin ->plugin( FilamentMaterial3Plugin::make() ->colorTheme(ColorTheme::Green) ->colors([ 'primary' => Color::Lime, ]) ) ->discoverResources(in: app_path('Filament/Resources'), for: 'App\Filament\Resources') ->discoverPages(in: app_path('Filament/Pages'), for: 'App\Filament\Pages') ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\Filament\Widgets'); } ``` ### Available Methods [](#available-methods) MethodDescription**`colorTheme(ColorTheme|string $theme)`**Set the color theme (accepts enum or string: 'blue', 'green', 'red', 'yellow')**`colors(array $colors)`**Override Filament colors (merged with theme defaults)**`primaryColor(string $hex)`**Set the primary/source color### Runtime Access [](#runtime-access) ``` use Manusiakemos\FilamentMaterial3\FilamentMaterial3Plugin; use Manusiakemos\FilamentMaterial3\Enums\ColorTheme; // Get current theme $theme = FilamentMaterial3Plugin::get()->getColorTheme(); // Check theme if ($theme === ColorTheme::Green) { // Theme-specific logic } ``` ### ColorTheme Enum [](#colortheme-enum) ``` use Manusiakemos\FilamentMaterial3\Enums\ColorTheme; // Get all available themes $themes = ColorTheme::cases(); // Get all theme values $values = ColorTheme::values(); // ['blue', 'green', 'red', 'yellow'] // Get default theme $default = ColorTheme::default(); // ColorTheme::Blue // Get theme info $label = ColorTheme::Green->getLabel(); // 'Green' $description = ColorTheme::Green->getDescription(); // 'Green color scheme' $cssPath = ColorTheme::Green->getCssPath(); // 'vendor/.../material-3-green.css' $filamentColor = ColorTheme::Green->getFilamentColor(); // array of color shades ``` Dark Mode --------- [](#dark-mode) Use Filament's built-in dark mode configuration: ``` public function panel(Panel $panel): Panel { return $panel // Enable dark mode ->darkMode() // Or force dark mode // ->darkMode(true) // Or disable // ->darkMode(false) ->plugin(FilamentMaterial3Plugin::make()); } ``` Fonts ----- [](#fonts) Use Filament's built-in font configuration: ``` public function panel(Panel $panel): Panel { return $panel ->font('Inter') // Or with provider // ->font('Inter', provider: 'google') ->plugin(FilamentMaterial3Plugin::make()); } ``` Creating Custom Themes ---------------------- [](#creating-custom-themes) 1. Create a new CSS file in `resources/css/themes/your-theme.css` 2. Define your Material 3 color variables for both light and dark modes 3. Create an entry file `resources/css/material-3-your-theme.css`: ``` /* material-3-your-theme.css */ @import './material-3-base.css'; @import './themes/your-theme.css'; ``` 4. Add the entry to your `vite.config.js` 5. Add the new case to `ColorTheme` enum Testing ------- [](#testing) ``` composer test ``` Requirements ------------ [](#requirements) - PHP 8.2 or higher - Laravel 10.0 or 11.0 or 12.0 - Filament 4.0 or 5.0 or higher License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. Credits ------- [](#credits) - [Manusiakemos](https://github.com/manusiakemos) - [All Contributors](../../contributors) Support ------- [](#support) If you discover any security related issues, please email instead of using the issue tracker. Star the Project ---------------- [](#star-the-project) If you find this package useful, please consider giving it a star on GitHub! ⭐ [Star on GitHub](https://github.com/manusiakemos/filament-material-3) ### Health Score 37 — LowBetter than 81% of packages Maintenance75 Regular maintenance activity Popularity8 Limited adoption so far Community8 Small or concentrated contributor base Maturity49 Maturing project, gaining track record Bus Factor1 Top contributor holds 91.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 ~0 days Total 2 Last Release 136d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/5b3317bafee76c331bf47d22aa81fef7acad05b26d7e03495a9935093416b75d?d=identicon)[manusiakemos](/maintainers/manusiakemos) --- Top Contributors [![manusiakemos](https://avatars.githubusercontent.com/u/31971611?v=4)](https://github.com/manusiakemos "manusiakemos (11 commits)")[![claude](https://avatars.githubusercontent.com/u/81847?v=4)](https://github.com/claude "claude (1 commits)") --- Tags laraveluithemematerial-designfilamentadmin-panelmaterial-3 ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/manusiakemos-filament-material-3/health.svg) ``` [![Health](https://phpackages.com/badges/manusiakemos-filament-material-3/health.svg)](https://phpackages.com/packages/manusiakemos-filament-material-3) ``` ### Alternatives [rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3914.6k](/packages/rawilk-profile-filament-plugin)[mradder/filament-logger Audit logging, activity tracking, exports, alerts, and dashboards for Filament admin panels. 2317.4k](/packages/mradder-filament-logger)[relaticle/custom-fields User Defined Custom Fields for Laravel Filament 16354.2k](/packages/relaticle-custom-fields)[marcelweidum/filament-passkeys Use passkeys in your filamentphp app 6649.5k1](/packages/marcelweidum-filament-passkeys)[slimani/filament-media-manager A media manager plugin for Filament. 126.9k](/packages/slimani-filament-media-manager)[andreia/filament-ui-switcher Add a modal with options to switch between different UI layouts and styles (colors, fonts, font sizes). 246.4k](/packages/andreia-filament-ui-switcher) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)