> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Plugin development
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
You are currently viewing the documentation for Filament 2.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/5.x).
Plugins can be used to extend Filament's default behaviour and create reusable modules for use in multiple applications.
To create a new plugin, extend the `Filament\PluginServiceProvider` class provided by Filament:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\PluginServiceProvider;
use Spatie\LaravelPackageTools\Package;
class ExampleServiceProvider extends PluginServiceProvider
{
public function configurePackage(Package $package): void
{
$package->name('your-package-name');
}
// ...
}
```
The `PluginServiceProvider` extends the service provider from [Laravel Package Tools](https://github.com/spatie/laravel-package-tools), so all `configurePackage()` options available there are available here as well.
Plugins must have a unique name property.
## Registering plugins
### Application plugins
If you're developing a plugin for a specific application, you should register the new service provider in your `config/app.php` file:
```php theme={"theme":"gruvbox-dark-hard"}
return [
'providers' => [
// ...
\App\Providers\ExampleServiceProvider::class,
]
];
```
Laravel will load your service provider when bootstrapping and your plugin will be initialised.
### Distributed plugins
Much like a normal Laravel package, you should add your service provider's fully qualified class name to the `extra.laravel.providers` array in your package's `composer.json` file:
```json theme={"theme":"gruvbox-dark-hard"}
{
"extra": {
"laravel": {
"providers": [
"Vendor\\Package\\ExampleServiceProvider"
]
}
}
}
```
This will ensure your service provider is automatically loaded by Laravel when the package is installed.
## Resources
To register a custom resource, add the fully qualified class name to the `$resources` property in your service provider:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\PluginServiceProvider;
use Spatie\LaravelPackageTools\Package;
use Vendor\Package\Resources\CustomResource;
class ExampleServiceProvider extends PluginServiceProvider
{
protected array $resources = [
CustomResource::class,
];
public function configurePackage(Package $package): void
{
$package->name('your-package-name');
}
}
```
Filament will automatically register your `Resource` and ensure that Livewire can discover it.
## Pages
To register a custom page, add the fully qualified class name to the `$pages` property in your service provider:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\PluginServiceProvider;
use Spatie\LaravelPackageTools\Package;
use Vendor\Package\Pages\CustomPage;
class ExampleServiceProvider extends PluginServiceProvider
{
protected array $pages = [
CustomPage::class,
];
public function configurePackage(Package $package): void
{
$package->name('your-package-name');
}
}
```
Filament will automatically register your `Page` and ensure that Livewire can discover it.
## Widgets
To register a custom widget, add the fully qualified class name to the `$widgets` property in your service provider:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\PluginServiceProvider;
use Spatie\LaravelPackageTools\Package;
use Vendor\Package\Widgets\CustomWidget;
class ExampleServiceProvider extends PluginServiceProvider
{
protected array $widgets = [
CustomWidget::class,
];
public function configurePackage(Package $package): void
{
$package->name('your-package-name');
}
}
```
Filament will automatically register your `Widget` and ensure that Livewire can discover it.
## Frontend assets
Filament plugins can also register their own frontend assets. These assets will be included on all Filament related pages, allowing you to use your own CSS and JavaScript.
### Stylesheets
To include a custom stylesheet, add it to the `$styles` property in your service provider. You should use a unique name as the key and the URL to the stylesheet as the value.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\PluginServiceProvider;
use Spatie\LaravelPackageTools\Package;
class ExampleServiceProvider extends PluginServiceProvider
{
protected array $styles = [
'my-package-styles' => __DIR__ . '/../dist/app.css',
];
public function configurePackage(Package $package): void
{
$package->name('your-package-name');
}
}
```
#### Tailwind CSS
If you are using Tailwind classes, that are not used in Filament core, you need to compile your own Tailwind CSS file and bundle it with your plugin. Follow the Tailwind instructions for setup, but omit `@tailwind base` as this would overwrite the base styles if users customize their Filament theme.
After compilation, your Tailwind stylesheet may contain classes that are already used in Filament core. You should purge those classes with [awcodes/filament-plugin-purge](https://github.com/awcodes/filament-plugin-purge) to keep the stylesheets size low.
### Scripts
To include a custom script, add it to the `$scripts` property in your service provider. You should use a unique name as the key and the URL to the script as the value. These scripts will be added after the core Filament script.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\PluginServiceProvider;
use Spatie\LaravelPackageTools\Package;
class ExampleServiceProvider extends PluginServiceProvider
{
protected array $scripts = [
'my-package-scripts' => __DIR__ . '/../dist/app.js',
];
public function configurePackage(Package $package): void
{
$package->name('your-package-name');
}
}
```
To add scripts before the core Filament script, use the `$beforeCoreScripts` property. This is useful if you want to hook into an Alpine event.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\PluginServiceProvider;
use Spatie\LaravelPackageTools\Package;
class ExampleServiceProvider extends PluginServiceProvider
{
protected array $beforeCoreScripts = [
'my-package-scripts' => __DIR__ . '/../dist/app.js',
];
public function configurePackage(Package $package): void
{
$package->name('your-package-name');
}
}
```
### Providing data to the frontend
Whilst building your plugin, you might find the need to generate some data on the server and access it on the client.
To do this, use the `getScriptData()` method on your service provider and return an array of `string` keys and values that can be passed to converted into JSON:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\PluginServiceProvider;
use Illuminate\Support\Facades\Auth;
use Spatie\LaravelPackageTools\Package;
class ExampleServiceProvider extends PluginServiceProvider
{
public function configurePackage(Package $package): void
{
$package->name('your-package-name');
}
protected function getScriptData(): array
{
return [
'userId' => Auth::id(),
];
}
}
```
You may now access this data in your scripts:
```blade theme={"theme":"gruvbox-dark-hard"}
```
## User menu
To register [user menu items](./navigation#customizing-the-user-menu) from your plugin, return them from the `getUserMenuItems()` method in your service provider:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\PluginServiceProvider;
use Spatie\LaravelPackageTools\Package;
use Vendor\Package\Pages\CustomPage;
class ExampleServiceProvider extends PluginServiceProvider
{
public function configurePackage(Package $package): void
{
$package->name('your-package-name');
}
protected function getUserMenuItems(): array
{
return [
UserMenuItem::make()
->label('Settings')
->url(route('filament.pages.settings'))
->icon('heroicon-s-cog'),
];
}
}
```
Filament will automatically register your `Page` and ensure that Livewire can discover it.
## Commands, views, translations, migrations and more
Since the `PluginServiceProvider` extends the service provider from [Laravel Package Tools](https://github.com/spatie/laravel-package-tools), you can use the [`configurePackage` method](https://github.com/spatie/laravel-package-tools#usage) to register [commands](https://github.com/spatie/laravel-package-tools#registering-commands), [views](https://github.com/spatie/laravel-package-tools#working-with-views), [translations](https://github.com/spatie/laravel-package-tools#working-with-translations), [migrations](https://github.com/spatie/laravel-package-tools#working-with-migrations) and more.
## ServingFilament Event
If you rely on data defined by Filament on `boot()` or through `Filament::serving()`, you can register listeners for the `Filament\Events\ServingFilament` event:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Events\ServingFilament;
use Filament\PluginServiceProvider;
use Illuminate\Support\Facades\Event;
use Spatie\LaravelPackageTools\Package;
class ExampleServiceProvider extends PluginServiceProvider
{
public function configurePackage(Package $package): void
{
$package->name('your-package-name');
}
public function packageConfiguring(Package $package): void
{
Event::listen(ServingFilament::class, [$this, 'registerStuff']);
}
protected function registerStuff(ServingFilament $event): void
{
// ...
}
}
```
)}
Your logo here