Want your Filament applications to look more streamlined? The official Filament Minimal Theme features a clean design with less rounding, a lighter background and redesigned UI components. No need to hire a designer to make your projects look different from the default Filament style. Simply install our Composer package and you're good to go. Perfect for corporate software.
This theme covers all Filament packages and can be used standalone. You may choose a license for a single project or unlimited projects, both including free updates.
Filament Minimal Theme alpha requires the latest version of Filament v3, as it depends on new APIs added to Filament's core.
This plugin is currently in alpha, which means it's not yet ready for use in production environments.
Filament Minimal Theme can be installed using our private Composer repository. Configure the repository in your application's composer.json
file:
"repositories": [ { "type": "composer", "url": "https://privato.pub/composer/filament" }]
Now you can install the package using:
composer require filament/minimal-theme:"^3.0@alpha"
You will be prompted to provide a username and password. Use your order email address as username and the license key you received as password.
To start using the Minimal Theme with the Filament Panel Builder, you need to create a custom theme.
Next, replace the imported Panel Builder stylesheet with the Minimal Theme stylesheet in your theme CSS file:
- @import '/vendor/filament/filament/resources/css/theme.css';+ @import '/vendor/filament/minimal-theme/resources/css/index.css';
Finally, register the theme plugin in your panel configuration file, and configure the 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 ->plugin(new MinimalTheme()) ->viteTheme('resources/css/filament/admin/theme.css') ->colors(MinimalTheme::getColors()) ->icons(MinimalTheme::getIcons()); }}
If you're using Filament packages outside the Panel Builder, you may install the Minimal Theme using the following steps.
First, make sure you've properly installed any Filament packages. Your project should have 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 Minimal Theme stylesheets for the Filament packages you're using:
@tailwind base;@tailwind components;@tailwind 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';
Note that some packages depend on other Filament packages, so you need to make sure to import the stylesheets of all dependencies. Here's the list of packages with their dependencies:
Next, compile your updated stylesheet using npm run build
.
Finally, the theme's colors, color shades, and icons need to be configured. You may do this by registering the theme's service provider in config/app.php
by adding it to the providers
array:
/* * Package Service Providers... */Filament\MinimalThemeServiceProvider::class,
Alternatively, if you need more control or only want to use the theme in certain parts of your app, you may configure the theme manually (e.g. in a middleware):
use Filament\MinimalTheme;Â MinimalTheme::configure();
If you find a bug in this package, please create an issue on the main Filament GitHub repository.
Filament is a collection of full-stack components for accelerated Laravel development. They are beautifully designed, intuitive to use, and fully extensible - the perfect starting point for your next Laravel app. Why waste time building the same features over and over again?