Filament Minimal Theme
By the designer of Filament
Want your Filament apps to look more streamlined? The official Minimal theme features a clean design with less rounding, lighter backgrounds, and restyled UI components.
Get the Filament Minimal ThemeScreenshots
Installation
Composer
Configure the Composer repository in your application’s composer.json
file by running:
composer config repositories.whizzy composer https://whizzy.dev/composer
Now you can install the package using:
composer require filament/minimal-theme:^3.0
Use your order email address as username and license key as password.
Stylesheet
To use the theme with Filament’s Panel Builder, create a custom theme.
In your theme.css
file, replace the imported stylesheet with the package stylesheet:
@import '/vendor/filament/filament/resources/css/theme.css'; @import '/vendor/filament/minimal-theme/resources/css/index.css';
Compile your theme stylesheet using npm run build
.
Configuration
Register the plugin in your panel configuration file, and configure colors and icons:
<?php namespace App\Providers\Filament; use Filament\MinimalTheme; use Filament\Panel; use Filament\PanelProvider; class AdminPanelProvider extends PanelProvider { public function panel(Panel $panel): Panel { return $panel ->viteTheme('resources/css/filament/admin/theme.css') ->plugin(new MinimalTheme) ->colors(MinimalTheme::getColors()) ->icons(MinimalTheme::getIcons()); } }
Stylesheet
To use the theme outside Filament’s Panel Builder, make sure your project has a Tailwind CSS config file that extends the Filament preset, a stylesheet (e.g. resources/css/app.css
), and a layout view that renders @filamentStyles
.
In your app CSS file, import the theme stylesheets for the Filament packages you’re using:
@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; @import '/vendor/filament/minimal-theme/resources/css/actions'; @import '/vendor/filament/minimal-theme/resources/css/forms'; @import '/vendor/filament/minimal-theme/resources/css/infolists'; @import '/vendor/filament/minimal-theme/resources/css/notifications'; @import '/vendor/filament/minimal-theme/resources/css/support'; @import '/vendor/filament/minimal-theme/resources/css/tables'; @import '/vendor/filament/minimal-theme/resources/css/widgets';
Compile your updated stylesheet using npm run build
.
Configuration
The theme’s colors, color shades, and icons may be configured by registering the theme’s service provider in bootstrap/providers.php
:
<?php return [ App\Providers\AppServiceProvider::class, Filament\MinimalThemeServiceProvider::class, ];
If you need more control over what parts of your app use the theme, you may configure the theme manually (e.g. in a middleware):
use Filament\MinimalTheme; MinimalTheme::configure();
Try it once,
or go unlimited.
Need a different look for your Filament applications? The Filament Minimal Theme has been carefully crafted by the designer of Filament. You may choose a license for a single project or unlimited projects, whatever suits your needs.
Get the Filament Minimal Theme