How to install a custom theme in Filament v5

Filament v5 panels are styled with Tailwind CSS v4. A custom theme is one CSS file that Vite compiles and your panel loads with ->viteTheme(). You need one to change how the panel looks, to use Tailwind classes in your own Blade views, or to install a ready-made theme.

This guide covers creating the theme, checking the wiring, customising it, installing a packaged theme, and fixing the errors people usually hit.

Tested on Laravel 13.39, Filament 5.11, Livewire 4.4.8 and Tailwind CSS 4, in a fresh app, on 31 October 2026. Each step below was run as written.

Requirements

• PHP 8.2+ and Laravel 11.28+
• Filament v5, which runs on Livewire v4
• Tailwind CSS v4.1+ and Vite (a new Laravel app already has both)
• Node.js and npm, to build the CSS

If you don't have a panel yet:

composer require filament/filament:"^5.0"
php artisan filament:install --panels

Step 1: Create the theme

php artisan make:filament-theme

If you have more than one panel, pass the panel ID, e.g. php artisan make:filament-theme admin. To use a package manager other than npm, add --pm, e.g. --pm=bun.

The command:

1. installs the Tailwind CSS packages it needs,
2. creates resources/css/filament/admin/theme.css (the folder is your panel ID),
3. adds that file to the input array in vite.config.js,
4. adds ->viteTheme() to your panel provider,
5. offers to build it.

The generated file looks like this:

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

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

The @import pulls in Filament's own styles. The @source lines tell Tailwind which files to scan for class names.

Step 2: Check the wiring

On a standard app the command makes both edits for you. If your files are formatted unusually, it prints instructions instead, and you add them by hand.

vite.config.js:

laravel({
    input: [
        'resources/css/app.css',
        'resources/js/app.js',
        'resources/css/filament/admin/theme.css',
    ],
    refresh: true,
}),

app/Providers/Filament/AdminPanelProvider.php:

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

Step 3: Build

npm run build

Or keep npm run dev running while you work. Run the build again after every change to theme.css and in every deploy. public/build is usually git-ignored, so your server or CI has to build it too.

Step 4: Customise it

Use Tailwind classes in your own views. Filament's default stylesheet only contains the classes Filament itself uses. Add an @source line for every folder where you write Tailwind classes, then rebuild:

@source '../../../../resources/views/components/**/*';
@source '../../../../resources/views/livewire/**/*';
@source '../../../../app/Livewire/**/*';

Restyle Filament's own components. Filament puts fi- classes on its components, so you can target them with plain CSS below the @import. Tailwind's @apply, including dark:, works there:

.fi-sidebar {
    @apply bg-gray-50 dark:bg-gray-950;
}

Use your browser's inspector to find the fi- class of the part you want to change.

Step 5: Install a ready-made theme

A packaged theme ships its own theme.css, which you import instead of Filament's. Here's the whole install with Brisk, our free theme, which runs on Filament v4 and v5:

composer require filafly/brisk

Replace the @import line at the top of resources/css/filament/admin/theme.css. Keep the @source lines:

@import '../../../../vendor/filafly/brisk/resources/css/theme.css';

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

Register the theme plugin next to ->viteTheme():

use Filafly\Themes\Brisk\BriskTheme;

return $panel
    // ...
    ->viteTheme('resources/css/filament/admin/theme.css')
    ->plugin(BriskTheme::make());

Then npm run build and reload the panel.

The premium FilaFly themes install the same way. Composer pulls them from a private repository with your licence key, and each theme page has the exact steps. On Filament v5 you can use:

• Citrus: framed glass shells, mono labels and card-row tables
• Cypher: technical and angular, built for Filament v4 and v5
• Lucent: clean and minimal
• Prizm: glassmorphic and corporate

Each one supports light and dark mode. Compare the themes.

Troubleshooting

"Vite manifest not found at: …/public/build/manifest.json" Nothing has been built yet. Run npm run build, or start npm run dev.

"Unable to locate file in Vite manifest: resources/css/filament/admin/theme.css" The theme isn't in the input array of vite.config.js, or the path there differs from the one in ->viteTheme(). Make them match, then rebuild.

Tailwind classes in my Blade views do nothing. The file isn't covered by an @source line, so Tailwind never generated the class. Add the folder (Step 4) and rebuild.

My changes to theme.css don't show up. Rebuild, and check that the path in ->viteTheme() uses your panel's ID (e.g. filament/admin/, not filament/app/).

I'm upgrading from Filament v4. Your theme carries over as it is. v5 changes the Livewire version, not the theming. Filament's v5 upgrade guide lists no theme changes, and themes built for v4 installed and built unchanged in our test.

I'm upgrading from Filament v3. v3 themes used Tailwind CSS v3 and a tailwind.config.js file. From v4 on, themes are Tailwind v4 and configured in CSS. The simplest path is to run make:filament-theme again and move your custom rules into the new file.

Further reading

• Filament v5 docs: Creating a custom theme
• Tailwind CSS: Detecting classes in source files