• Screenshots
• Installation
  • Requirements
  • Installation
  • Panels
    • Stylesheet
    • Configuration
  • Standalone
    • Stylesheet
    • Configuration
• Changelog
• Issues

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 (3 activations) or unlimited projects, both including free updates.

#Screenshots

List orders page in light mode using the Filament Minimal Theme:

List orders page in light mode using the default Filament theme:

List orders page in dark mode using the Filament Minimal Theme:

List orders page in light mode using the default Filament theme:

Edit post page in light mode using the Filament Minimal Theme:

Edit post page in light mode using the default Filament theme:

Edit post page in dark mode using the Filament Minimal Theme:

Edit post page in dark mode using the default Filament theme:

Registration page in light mode using the Filament Minimal Theme:

Registration page in light mode using the default Filament theme:

Registration page in dark mode using the Filament Minimal Theme:

Registration page in dark mode using the default Filament theme:

#Installation

#Requirements

This plugin requires the latest version of Filament v3, as it depends on new APIs added to Filament's core.

#Installation

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://filament.privato.pub/composer"
    }
]

Now you can install the package using:

composer require filament/minimal-theme:"^3.0"

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.

#Panels

#Stylesheet

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';

Now compile your theme stylesheet using npm run build.

#Configuration

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());
    }
}

#Standalone

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.

#Stylesheet

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:

• Actions
  • Forms
  • Infolists
  • Notifications
  • Support
• Forms
  • Actions
  • Infolists
  • Notifications
  • Support
• Infolists
  • Actions
  • Forms
  • Notifications
  • Support
• Notifications
  • Actions
  • Support
• Support
• Tables
  • Actions
  • Forms
  • Infolists
  • Notifications
  • Support
• Widgets
  • Support

Next, compile your updated stylesheet using npm run build.

#Configuration

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();

#Changelog

Release notes of updates to the plugin can be viewed on Privato.

#Issues

If you find a bug in this package, please contact Zep via email.