Appearance

Changing the brand logo

By default, Filament will use your app's name as a brand logo in the admin panel.

You may create a resources/views/vendor/filament/components/brand.blade.php file to provide a custom logo:

<img src="{{ asset('/images/logo.svg') }}" alt="Logo" class="h-10">

Building themes

Filament allows you to change the fonts and color scheme used in the UI, by compiling a custom stylesheet to replace the default one. This custom stylesheet is called a "theme".

Themes use Tailwind CSS, the Tailwind Forms plugin, and the Tailwind Typography plugin. You may install these through NPM:

npm install tailwindcss @tailwindcss/forms @tailwindcss/typography --save-dev

To finish installing Tailwind, you must create a new tailwind.config.js file in the root of your project. The easiest way to do this is by running npx tailwindcss init.

In tailwind.config.js, register the plugins you installed, and add custom colors used by the form builder:

const colors = require('tailwindcss/colors')
 
module.exports = {
content: [
'./resources/**/*.blade.php',
'./vendor/filament/**/*.blade.php',
],
theme: {
extend: {
colors: {
danger: colors.rose,
primary: colors.blue,
success: colors.green,
warning: colors.yellow,
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
}

You may specify your own colors, which will be used throughout the admin panel.

In your webpack.mix.js file, Register Tailwind CSS as a PostCSS plugin :

const mix = require('laravel-mix')
 
mix.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
])

In /resources/css/app.css, import filament/forms vendor CSS and TailwindCSS:

@import '../../vendor/filament/forms/dist/module.esm.css';
 
@tailwind base;
@tailwind components;
@tailwind utilities;

Now, you may register the theme file in a service provider's boot() method:

use Filament\Facades\Filament;
 
Filament::serving(function (): void {
Filament::registerTheme(mix('css/app.css'));
});

Changing the maximum content width

Filament exposes a configuration option that allows you to change the maximum content width of all pages.

You must publish the configuration in order to access this feature.

In config/filament.php, set the layouts.max_content_width to any value between xl and 7xl, or full for no max width:

'layout' => [
'max_content_width' => 'full',
],

The default is 7xl.

Still need help? Join our Discord community or open a GitHub discussion

Enjoying Filament?

We are open source at heart. To allow us to build new features, fix bugs, and run the community, we require your financial support.

Sponsor Filament on GitHub