Version

Theme

Panel Builder

Configuration

Overview

By default, the configuration file is located at app/Providers/Filament/AdminPanelProvider.php. Keep reading to learn more about panels and how each has its own configuration file.

Introducing panels

By default, when you install the package, there is one panel that has been set up for you - and it lives on /admin. All the resources, custom pages, and dashboard widgets you create get registered to this panel.

However, you can create as many panels as you want, and each can have its own set of resources, pages and widgets.

For example, you could build a panel where users can log in at /app and access their dashboard, and admins can log in at /admin and manage the app. The /app panel and the /admin panel have their own resources, since each group of users has different requirements. Filament allows you to do that by providing you with the ability to create multiple panels.

The default admin panel

When you run filament:install, a new file is created in app/Providers/Filament - AdminPanelProvider.php. This file contains the configuration for the /admin panel.

When this documentation refers to the "configuration", this is the file you need to edit. It allows you to completely customize the app.

Creating a new panel

To create a new panel, you can use the make:filament-panel command, passing in the unique name of the new panel:

php artisan make:filament-panel app

This command will create a new panel called "app". A configuration file will be created at app/Providers/Filament/AppPanelProvider.php. You can access this panel at /app, but you can customize the path if you don't want that.

Since this configuration file is also a Laravel service provider, it needs to be registered in config/app.php. Filament will attempt to do this for you, but if you get an error while trying to access your panel then this process has probably failed. You can manually register the service provider by adding it to the providers array.

Changing the path

In a panel configuration file, you can change the path that the app is accessible at using the path() method:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->path('app');
}

If you want the app to be accessible without any prefix, you can set this to be an empty string:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->path('');
}

Make sure your routes/web.php file doesn't already define the '' or '/' route, as it will take precedence.

Render hooks

Render hooks allow you to render Blade content at various points in the framework views. You can register global render hooks in a service provider or middleware, but it also allows you to register render hooks that are specific to a panel. To do that, you can use the renderHook() method on the panel configuration object. Here's an example, integrating wire-elements/modal with Filament:

use Filament\Panel;
use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->renderHook(
PanelsRenderHook::BODY_START,
fn (): string => Blade::render('@livewire(\'livewire-ui-modal\')'),
);
}

A full list of available render hooks can be found here.

Setting a domain

By default, Filament will respond to requests from all domains. If you'd like to scope it to a specific domain, you can use the domain() method, similar to Route::domain() in Laravel:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->domain('admin.example.com');
}

Customizing the maximum content width

By default, Filament will restrict the width of the content on the page, so it doesn't become too wide on large screens. To change this, you may use the maxContentWidth() method. Options correspond to Tailwind's max-width scale. The options are ExtraSmall, Small, Medium, Large, ExtraLarge, TwoExtraLarge, ThreeExtraLarge, FourExtraLarge, FiveExtraLarge, SixExtraLarge, SevenExtraLarge, Full, MinContent, MaxContent, FitContent, Prose, ScreenSmall, ScreenMedium, ScreenLarge, ScreenExtraLarge and ScreenTwoExtraLarge. The default is SevenExtraLarge:

use Filament\Panel;
use Filament\Support\Enums\MaxWidth;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->maxContentWidth(MaxWidth::Full);
}

Lifecycle hooks

Hooks may be used to execute code during a panel's lifecycle. bootUsing() is a hook that gets run on every request that takes place within that panel. If you have multiple panels, only the current panel's bootUsing() will be run. The function gets run from middleware, after all service providers have been booted:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->bootUsing(function (Panel $panel) {
// ...
});
}

SPA mode

SPA mode utilizes Livewire's wire:navigate feature to make your server-rendered panel feel like a single-page-application, with less delay between page loads and a loading bar for longer requests. To enable SPA mode on a panel, you can use the spa() method:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->spa();
}

Unsaved changes alerts

You may alert users if they attempt to navigate away from a page without saving their changes. This is applied on Create and Edit pages of a resource, as well as any open action modals. To enable this feature, you can use the unsavedChangesAlerts() method:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->unsavedChangesAlerts();
}

Please note: this feature is not compatible with SPA mode.

Registering assets for a panel

You can register assets that will only be loaded on pages within a specific panel, and not in the rest of the app. To do that, pass an array of assets to the assets() method:

use Filament\Panel;
use Filament\Support\Assets\Css;
use Filament\Support\Assets\Js;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->assets([
Css::make('custom-stylesheet', resource_path('css/custom.css')),
Js::make('custom-script', resource_path('js/custom.js')),
]);
}

Applying middleware

You can apply extra middleware to all routes by passing an array of middleware classes to the middleware() method in the configuration:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->middleware([
// ...
]);
}

By default, middleware will be run when the page is first loaded, but not on subsequent Livewire AJAX requests. If you want to run middleware on every request, you can make it persistent by passing true as the second argument to the middleware() method:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->middleware([
// ...
], isPersistent: true);
}

Applying middleware to authenticated routes

You can apply middleware to all authenticated routes by passing an array of middleware classes to the authMiddleware() method in the configuration:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->authMiddleware([
// ...
]);
}

By default, middleware will be run when the page is first loaded, but not on subsequent Livewire AJAX requests. If you want to run middleware on every request, you can make it persistent by passing true as the second argument to the authMiddleware() method:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
return $panel
// ...
->authMiddleware([
// ...
], isPersistent: true);
}
Edit on GitHub

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

Previous
Users