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.

Choose license Preview demo

Screenshots

List orders page in light mode with the Filament Minimal Theme — List orders page

List orders page in dark mode with the Filament Minimal Theme — List orders page

Edit post page in light mode with the Filament Minimal Theme — Edit post page

Edit post page in dark mode with the Filament Minimal Theme — Edit post page

Registration page in light mode with the Filament Minimal Theme — Registration page

Registration page in dark mode with the Filament Minimal Theme — Registration page

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

use Filament\MinimalTheme;
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        ->viteTheme('resources/css/filament/admin/theme.css')
        ->plugin(MinimalTheme::make())
}

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

use Filament\MinimalTheme;

MinimalTheme::make();

Pricing

Try it once,
or go unlimited.

The Minimal theme has been carefully crafted by the designer of Filament to make your app stand out. Try the theme on a single project or go unlimited with one license for all your projects.

Single

€59

one-time payment plus local taxes

Get lifetime access and one year of updates to the Filament Minimal Theme for a single project.

All components—all Filament packages and components are covered, whether you use them in panels or standalone.
Composer package—no manual downloads and ZIP files, simply install and manage the package using Composer.
Single project—buy once and get lifetime access to the theme for a single project.
One year of updates—get any updates to this theme for free for one year.

Unlimited

€199

one-time payment plus local taxes

Purchase once and get lifetime access to the Filament Minimal Theme for as many projects as you need, including free updates.

All components—all Filament packages and components are covered, whether you use them in panels or standalone.
Composer package—no manual downloads and ZIP files, simply install and manage the package using Composer.
Unlimited projects—buy once and use the theme for as many projects as you need.
Lifetime updates—download any future updates to this theme for free, forever.