yosrigam/filament-md3-theme

Material Design 3–aligned styling layer for Filament v4 admin panels (Tailwind/CSS only).

v1.0.0 2026-04-26 10:41 UTC

Requires

• php: ^8.2
• filament/filament: ^4.0
• illuminate/contracts: ^11.0|^12.0
• illuminate/support: ^11.0|^12.0

MIT

• laravel
• material-design
• tailwind
• filament
• filament-v4

README

Material Design 3–aligned CSS for Filament v4. Filament stays Livewire, Blade, and Tailwind; this package remaps neutrals and adds MD3-style surfaces, elevation, shape, and Roboto Flex.

Packagist: packagist.org/packages/yosrigam/filament-md3-theme
Repository: github.com/yosrigam/filament-md3-theme
Composer: yosrigam/filament-md3-theme
PHP namespace: Makalabs\FilamentMd3Theme (import FilamentMd3Theme from there)

Preview

Filament v4 admin dashboard with this theme applied:

Resource list (blog tags) showing table, sidebar, and MD3 surfaces:

Requirements

• PHP ^8.2
• Laravel ^11.0 | ^12.0
• Filament ^4.0
• Vite + Tailwind v4 (same stack as php artisan make:filament-theme)

Install

composer require yosrigam/filament-md3-theme

Quick start

1. Publish config + Vite entry (optional)

php artisan vendor:publish --tag=filament-md3-theme

This publishes:

• config/filament-md3-theme.php
• resources/css/filament/admin/filament-md3-theme.css (Filament base + MD3 imports + @source paths)

You can instead keep a hand-written file; see examples/panel-theme.css.

2. Register the CSS in Vite

In vite.config.js, add your panel theme file to the Laravel plugin input array, for example:

laravel({
    input: [
        'resources/css/app.css',
        'resources/css/filament/admin/theme.css', // or filament-md3-theme.css
        // ...
    ],
}),

Run npm run build (or npm run dev).

3. Wire the panel (one line)

At the end of your PanelProvider::panel() method, return the panel through the helper so the theme can be toggled from .env without removing code:

use Makalabs\FilamentMd3Theme\FilamentMd3Theme;

public function panel(Panel $panel): Panel
{
    $panel = $panel
        ->default()
        ->id('admin')
        ->path('admin')
        // ... ->colors(), ->discoverResources(), etc.
        ;

    return FilamentMd3Theme::applyTo($panel);
}

Do not call ->viteTheme() separately if you use applyTo(); the helper registers it when enabled.

4. Environment toggle (minimal config)

In .env:

# true = MD3 Vite theme; false = stock Filament look (no viteTheme registered)
FILAMENT_MD3_THEME_ENABLED=true

# Optional: override path (default matches config file)
# FILAMENT_MD3_THEME_VITE_PATH=resources/css/filament/admin/theme.css

After changing env values:

php artisan config:clear

Example panel provider

See examples/AdminPanelProvider.example.php for a minimal PanelProvider showing FilamentMd3Theme::applyTo().

How it works

• FilamentMd3Theme::applyTo($panel) — If enabled is true, calls viteTheme() with vite_theme_path. If false, leaves Filament’s default theme.
• Gray scale — md3-theme.css remaps --gray-50 … --gray-950 on html.fi / html.fi.dark so all Filament gray-* utilities pick up MD3-tinted neutrals.
• Primary / danger / success / … — Still defined by your panel ->colors([...]).

Project layout

config/filament-md3-theme.php
examples/AdminPanelProvider.example.php
examples/panel-theme.css
resources/css/md3-theme.css
resources/stubs/panel-vite-entry.css.stub
src/FilamentMd3Theme.php
src/FilamentMd3ThemeServiceProvider.php
docs/screenshots/dashboard.png
docs/screenshots/blog-tags.png

License

MIT.