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 Theme

Screenshots

List orders page in light mode with the Filament Minimal Theme List orders page in dark mode with the Filament Minimal Theme List orders page in light mode with the default Filament theme List orders page in dark mode with the default Filament theme
Minimal
Default
Edit post page in light mode with the Filament Minimal Theme Edit post page in dark mode with the Filament Minimal Theme Edit post page in light mode with the default Filament theme Edit post page in dark mode with the default Filament theme
Minimal
Default
Registration page in light mode with the Filament Minimal Theme Registration page in dark mode with the Filament Minimal Theme Registration page in light mode with the default Filament theme Registration page in dark mode with the default Filament theme
Minimal
Default

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