Filament Flat Theme

A simple theme for FilamentPHP based on a Flat design.

Screenshots

Dashboard

Dashboard Light	Dashboard Dark

Table

Customers Light	Customers Dark

Form

Form Light	Form Dark

Widget & Table

Orders Light	Orders Dark

Cluster (Sidebar)

Products Light	Products Dark

Installation

composer require spykapp/filament-flat-theme

After installing the package, you’ll need to set up a custom Filament theme (if you haven’t already). Follow the official guide here:

📘 Creating a Custom Theme

v3	v4
https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme	https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme

---

Once your custom theme is set up:

1. Open your theme.css file.
2. Replace this line:

Filament v4 :

@import '../../../../vendor/filament/filament/resources/css/theme.css';

with:

@import '../../../../vendor/spykapp/filament-flat-theme/resources/css/theme.css';

Filament v3 :

@import '/vendor/filament/filament/resources/css/theme.css';

with:

@import '/vendor/spykapp/filament-flat-theme/resources/css/theme.css';

3. Then run the build process:

npm run build

---

✅ That’s it, you’re now using the Filament Flat Theme.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Credits

• Sanchit Patil
• All Contributors

License

The MIT License (MIT). Please see License File for more information.