Plugins
Minimal Theme
Featuring a clean design with less rounding, a lighter background and redesigned UI components.
Form Builder
Table Builder
Panel Builder
Theme
Dark theme support
Yes
Multi language support
Yes
Compatible with the latest version
Supported versions: 3.x
Documentation

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: Screenshot of the list orders page in light mode using the Filament Minimal Theme

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

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

List orders page in light mode using the default Filament theme: Screenshot of the list orders page in dark mode using the default Filament theme

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

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

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

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

Registration page in light mode using the Filament Minimal Theme: Screenshot of the registration page in light mode using the Filament Minimal Theme

Registration page in light mode using the default Filament theme: Screenshot of the registration page in light mode using the default Filament theme

Registration page in dark mode using the Filament Minimal Theme: Screenshot of the registration page in light mode using the Filament Minimal Theme

Registration page in dark mode using the default Filament theme: Screenshot of the registration page in light 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:

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

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.

Filament

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?

6
Plugins
579
Stars
More from this author
Featured Plugins