Embedding Livewire Components in Filament 4 Schemas

One of the most underrated features in Filament 4 is the ability to seamlessly embed full Livewire components directly within Filament schemas.

This powerful capability allows developers to break free from the constraints of traditional form fields and create highly interactive, reusable UI components that integrate perfectly with Filament's ecosystem.

In this article, we'll explore how this feature works, why it's a game-changer, and walk through a real-world example: embedding an addresses table inside a tabbed interface of a lead management system

The Problem

While building a lead management system, we needed to display and manage related data in a table format inside the lead’s view page.

Traditional approaches fell short:

• Relation managers → useful, but require leaving the main record view

The Solution

Filament 4's Livewire schema component solves this elegantly.

Here’s how we implemented it step by step:

Step 1: Create the Livewire Component

<?php

namespace App\Livewire;

use App\Enums\AddressType;
use App\Filament\Shared\Forms\AddressForm;
use App\Models\Lead;
use App\Models\Setting\Country;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Actions\CreateAction;
use Filament\Actions\DeleteAction;
use Filament\Actions\EditAction;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Livewire\Component;

class LeadAddresses extends Component implements HasActions, HasSchemas, HasTable
{
    use InteractsWithActions;
    use InteractsWithSchemas;
    use InteractsWithTable;

    public Lead $lead;

    public function mount(?Lead $record = null): void
    {
        $this->lead = $record;
    }

    public function table(Table $table): Table
    {
        return $table
            ->query($this->lead->addresses()->getQuery())
            ->columns([
                TextColumn::make('type')
                    ->label('Type')
                    ->badge(),

                TextColumn::make('street')
                    ->label('Street Address')
                    ->searchable(),

                // ... more columns
            ])
            ->headerActions([
                CreateAction::make()
                    ->label('Add New Address'),
            ])
            ->actions([
                EditAction::make(),
                DeleteAction::make(),
            ])
            ->emptyStateDescription('No addresses have been added to this lead yet.')
            ->emptyStateIcon('heroicon-o-map-pin');
    }

    public function render()
    {
        return view('livewire.lead-addresses');
    }
}

Step 2: Create the Blade View

<div>
    {{ $this->table }}
    <x-filament-actions::modals />
</div>

Step 3: Embed in the Schema

use App\Livewire\LeadAddresses;
use Filament\Schemas\Components\Livewire;

Tab::make('Addresses')
    ->icon('heroicon-o-map-pin')
    ->schema([
        Livewire::make(LeadAddresses::class)
            ->key('lead-addresses')
            ->columnSpanFull(),
    ]),

The Magic Behind the Scenes

When using Livewire::make(), several things happen automatically:

1. Automatic Record Injection – The current Lead record is passed directly to mount().
2. State Isolation – key() ensures each embedded component has its own isolated state.

Why This Approach Wins

• Reusability → The component can be dropped into multiple places or panels.
• Testability → Easy to test in isolation.
• Maintainability → Keeps complex logic organized.
• Performance → Only the component re-renders, not the entire page.
• User Experience → Rich functionality without leaving the record view.

Embedding Livewire components inside Filament 4 schemas is a paradigm shift in building admin interfaces. It blends Livewire’s reactivity with Filament’s polished UI system, enabling developers to build sophisticated, user-friendly, and maintainable panels and dashboard with less code.