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(2mo ago)113MITCSSPHP ^8.2 Since Feb 18Pushed 2mo 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 1mo 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 39 — LowBetter than 86% of packages Maintenance82 Actively maintained with recent releases Popularity8 Limited adoption so far Community8 Small or concentrated contributor base Maturity48 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 89d 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 [watheqalshowaiter/filament-sticky-table-header A Filament plugin that makes table headers stick when scrolling down for better UX. 3020.4k](/packages/watheqalshowaiter-filament-sticky-table-header)[andreia/filament-ui-switcher Add a modal with options to switch between different UI layouts and styles (colors, fonts, font sizes). 233.8k](/packages/andreia-filament-ui-switcher)[mradder/filament-logger Audit logging, activity tracking, exports, alerts, and dashboards for Filament admin panels. 141.1k](/packages/mradder-filament-logger)[a909m/filament-statefusion Filament StateFusion is a powerful FilamentPHP plugin that seamlessly integrates Spatie Laravel Model States into the Filament admin panel. This package provides an intuitive way to manage model states, transitions, and filtering within Filament, enhancing the user experience and developer productivity. 3010.8k1](/packages/a909m-filament-statefusion)[inerba/filament-db-config A Filament plugin for database-backed application settings and editable content, with caching and easy page generation. 329.1k](/packages/inerba-filament-db-config)[resma/filament-awin-theme A modern, responsive, and customizable theme for FilamentPHP, designed to elevate your admin panel with a sleek interface and seamless user experience. 1714.6k](/packages/resma-filament-awin-theme) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)