Laravel Filament: Rapid Admin Panel Development Guide

Building an admin panel from scratch is tedious and error-prone. You need to handle authentication, CRUD operations, form validation, data tables, and more. Laravel Filament simplifies this by providing a rapid development toolkit that generates beautiful, responsive admin interfaces with minimal code.

Filament is built on top of Laravel and uses Livewire for dynamic interactions. It offers a rich set of components: resources (for CRUD), forms, tables, widgets, notifications, and custom pages. With Filament, you can create a fully functional admin panel in hours instead of days.

In this tutorial, you'll learn how to install Filament, create resources for your models, customize forms and tables, add custom pages, and implement security best practices. We'll also cover real-world scenarios like handling file uploads, using relationships, and optimizing performance.

By the end, you'll be able to build production-ready admin panels that are both developer-friendly and user-friendly.

Installing Filament

To get started, you need a Laravel application (version 8 or higher). Install Filament via Composer:

``bash composer require filament/filament ``

After installation, publish the configuration and assets:

``bash php artisan filament:install --panels ``

This command creates a panel provider (e.g., app/Providers/Filament/AdminPanelProvider.php) and publishes the configuration file. You can customize the panel's path, middleware, and other settings in this file.

Next, create a user with admin privileges. Filament uses Laravel's authentication, so you can use the default User model. Run migrations and create a user:

``bash php artisan migrate php artisan tinker > \App\Models\User::create(['name' => 'Admin', 'email' => 'admin@example.com', 'password' => bcrypt('password')]); ``

Now, access your admin panel at /admin. Log in with the credentials you created. You should see the default Filament dashboard.

Key Takeaway: Filament installation is straightforward. The panel provider is the central configuration point for your admin panel.

<?php

namespace App\Providers\Filament;

use Filament\Panel;
use Filament\PanelProvider;

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->colors([
                'primary' => '#6366f1',
            ])
            ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
            ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
            ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets')
            ->middleware([
                'web',
                Authenticate::class,
            ]);
    }
}

Creating Your First Resource

Resources are the core of Filament. They map to Eloquent models and provide CRUD interfaces. Let's create a resource for a Post model.

First, create the model and migration:

``bash php artisan make:model Post -m ``

Add fields to the migration:

``php Schema::create('posts', function (Blueprint $table) { $table->id(); $table->string('title'); $table->text('content'); $table->boolean('is_published')->default(false); $table->timestamps(); }); ``

Run the migration:

``bash php artisan migrate ``

Now, create the Filament resource:

``bash php artisan make:filament-resource Post ``

This generates a resource class at app/Filament/Resources/PostResource.php. Open it and define the form and table schemas.

Form Schema:

``php public static function form(Form $form): Form { return $form ->schema([ TextInput::make('title')->required()->maxLength(255), RichEditor::make('content')->required(), Toggle::make('is_published'), ]); } ``

Table Schema:

``php public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('title')->searchable(), IconColumn::make('is_published')->boolean(), TextColumn::make('created_at')->dateTime(), ]) ->filters([ Filter::make('is_published'), ]) ->actions([ EditAction::make(), DeleteAction::make(), ]) ->bulkActions([ BulkActionGroup::make([ DeleteBulkAction::make(), ]), ]); } ``

Now, navigate to /admin/posts in your browser. You'll see a fully functional CRUD interface with forms, tables, and actions.

Key Takeaway: Resources auto-generate CRUD interfaces. Customize forms and tables using Filament's rich component library.

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\PostResource\Pages;
use App\Models\Post;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;

class PostResource extends Resource
{
    protected static ?string $model = Post::class;

    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('title')
                    ->required()
                    ->maxLength(255),
                Forms\Components\RichEditor::make('content')
                    ->required(),
                Forms\Components\Toggle::make('is_published'),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('title')->searchable(),
                Tables\Columns\IconColumn::make('is_published')->boolean(),
                Tables\Columns\TextColumn::make('created_at')->dateTime(),
            ])
            ->filters([
                Tables\Filters\Filter::make('is_published'),
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
                Tables\Actions\DeleteAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListPosts::route('/'),
            'create' => Pages\CreatePost::route('/create'),
            'edit' => Pages\EditPost::route('/{record}/edit'),
        ];
    }
}

Customizing Forms with Validation and Relationships

Filament forms are highly customizable. You can add validation rules, handle relationships, and use advanced components.

Validation: Add rules using methods like ->required(), ->email(), ->unique(), etc. For custom rules, use ->rule(new CustomRule).

Relationships: Use Select or CheckboxList for belongs-to or many-to-many relationships. For example, if a post belongs to a category:

``php Select::make('category_id') ->relationship('category', 'name') ->required(), ``

File Uploads: Use FileUpload component:

``php FileUpload::make('featured_image') ->image() ->directory('posts') ->visibility('public'), ``

Repeater for nested forms: Use Repeater for dynamic rows:

``php Repeater::make('tags') ->relationship('tags') ->schema([ TextInput::make('name')->required(), ]), ``

Conditional fields: Use hidden() or visible() based on other field values:

``php TextInput::make('discount') ->visible(fn (Get $get) => $get('has_discount')), ``

Key Takeaway: Filament forms support validation, relationships, file uploads, and dynamic fields. Use the Get and Set utilities for conditional logic.

public static function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('title')
                ->required()
                ->maxLength(255)
                ->unique(ignoreRecord: true),
            Select::make('category_id')
                ->relationship('category', 'name')
                ->required(),
            RichEditor::make('content')->required(),
            FileUpload::make('featured_image')
                ->image()
                ->directory('posts')
                ->visibility('public'),
            Toggle::make('is_published'),
            Repeater::make('tags')
                ->relationship('tags')
                ->schema([
                    TextInput::make('name')->required(),
                ]),
        ]);
}

Building Custom Pages and Widgets

Beyond resources, Filament allows you to create custom pages and widgets for dashboards or specialized views.

Custom Pages: Create a page with:

``bash php artisan make:filament-page Settings ``

This generates a page class. You can add forms, tables, or any Livewire component. For example, a settings page with a form:

```php use Filament\Pages\Page;

class Settings extends Page { protected static ?string $navigationIcon = 'heroicon-o-cog';

protected static string $view = 'filament.pages.settings';

public $name; public $email;

public function mount(): void { $this->form->fill([ 'name' => auth()->user()->name, 'email' => auth()->user()->email, ]); }

public function submit(): void { $this->validate(); auth()->user()->update($this->form->getState()); Notification::make()->success()->title('Settings saved.')->send(); }

protected function getFormSchema(): array { return [ TextInput::make('name')->required(), TextInput::make('email')->email()->required(), ]; } } ```

Widgets: Create a widget for the dashboard:

``bash php artisan make:filament-widget StatsOverview ``

Widgets can display stats, charts, or any data. Example:

```php use Filament\Widgets\StatsOverviewWidget as BaseWidget; use Filament\Widgets\StatsOverviewWidget\Stat;

class StatsOverview extends BaseWidget { protected function getStats(): array { return [ Stat::make('Total Posts', Post::count()), Stat::make('Published Posts', Post::where('is_published', true)->count()), Stat::make('Users', User::count()), ]; } } ```

Key Takeaway: Custom pages and widgets extend Filament beyond CRUD. Use them for settings, reports, or any custom functionality.

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;
use Filament\Forms;
use Filament\Notifications\Notification;

class Settings extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-cog';

    protected static string $view = 'filament.pages.settings';

    public $name;
    public $email;

    public function mount(): void
    {
        $this->form->fill([
            'name' => auth()->user()->name,
            'email' => auth()->user()->email,
        ]);
    }

    public function submit(): void
    {
        $this->validate();
        auth()->user()->update($this->form->getState());
        Notification::make()->success()->title('Settings saved.')->send();
    }

    protected function getFormSchema(): array
    {
        return [
            Forms\Components\TextInput::make('name')->required(),
            Forms\Components\TextInput::make('email')->email()->required(),
        ];
    }
}

Implementing Authorization and Roles

Filament integrates with Laravel's authorization system. You can define policies and gates to control access.

Policies: Create a policy for a model:

``bash php artisan make:policy PostPolicy --model=Post ``

Define methods like viewAny, view, create, update, delete. Then register the policy in AuthServiceProvider.

Filament Integration: Filament automatically checks policies for resources. For example, if a user cannot view a post, the edit button will be hidden.

Roles and Permissions: Use a package like spatie/laravel-permission for role-based access. Install it:

``bash composer require spatie/laravel-permission php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider" php artisan migrate ``

Create roles and assign permissions. Then, in Filament, you can check permissions in the panel provider:

``php public function panel(Panel $panel): Panel { return $panel ->authMiddleware([ Authenticate::class, 'role:admin', // custom middleware ]); } ``

Or use Filament's can() method in resources:

``php public static function canViewAny(): bool { return auth()->user()->can('viewAny', static::getModel()); } ``

Key Takeaway: Use Laravel policies and Spatie permissions for fine-grained access control. Filament respects these automatically.

<?php

namespace App\Policies;

use App\Models\User;
use App\Models\Post;
use Illuminate\Auth\Access\HandlesAuthorization;

class PostPolicy
{
    use HandlesAuthorization;

    public function viewAny(User $user): bool
    {
        return $user->hasPermissionTo('view posts');
    }

    public function view(User $user, Post $post): bool
    {
        return $user->hasPermissionTo('view posts');
    }

    public function create(User $user): bool
    {
        return $user->hasPermissionTo('create posts');
    }

    public function update(User $user, Post $post): bool
    {
        return $user->hasPermissionTo('edit posts');
    }

    public function delete(User $user, Post $post): bool
    {
        return $user->hasPermissionTo('delete posts');
    }
}

Performance Optimization and Production Deployment

When deploying Filament to production, consider these optimizations:

Caching: Run php artisan optimize to cache configurations, routes, and views. For Filament, also cache the Livewire components:

``bash php artisan livewire:discover php artisan filament:cache ``

Asset Bundling: Filament uses Vite for asset compilation. In production, ensure you run npm run build to compile assets.

Database Queries: Use eager loading to avoid N+1 queries. In table columns, use ->with(['relation']) to load relationships.

Lazy Loading: For large datasets, use lazy loading or pagination. Filament's table supports pagination out of the box.

Queue Jobs: Offload heavy tasks like file processing or email sending to queues.

Security: Ensure your .env file has APP_DEBUG=false in production. Use HTTPS and set secure cookies.

Monitoring: Use Laravel's logging and monitoring tools like Telescope or Laravel Pulse.

Key Takeaway: Optimize Filament for production by caching, using eager loading, and offloading heavy tasks.

#!/bin/bash
# Production deployment script for Laravel Filament

php artisan down --retry=60

git pull origin main

composer install --no-dev --optimize-autoloader

php artisan migrate --force

php artisan config:cache
php artisan route:cache
php artisan view:cache
php artisan filament:cache

npm ci --production
npm run build

php artisan up