Relation Pages plugin screenshot
Dark mode ready
Multilingual support
Supports v5.x

Relation Pages

Add fully custom, free-form tabs alongside your Relation Managers in any Filament resource — no forced table, no forced relationship.

Tags: Panels
Supported versions:
5.x 4.x
Gheith avatar Author: Gheith

Documentation

Latest Version on Packagist Total Downloads Tests License

Add fully custom, free-form tabs alongside your Relation Managers in any Filament resource — no forced table, no forced relationship. Use Filament schema components, plain HTML, Alpine.js, or anything you like.

Relation Pages Demo

Relation Pages Demo


#Requirements

Package Version
PHP ^8.2
Laravel ^12.0 | ^13.0
Filament ^4.0 | ^5.0

#Installation

composer require gheith3/filament-relation-pages

The service provider is auto-discovered by Laravel — no manual registration needed.


#Usage

#1 — Generate a Relation Page

php artisan make:filament-relation-page BuildingSummaryPage --resource=Buildings

This creates two files:

app/Filament/Resources/Buildings/RelationPages/BuildingSummaryPage.php
resources/views/filament/resources/buildings/building-summary-page.blade.php

#2 — Add Content to the Class

Open the generated PHP class and add your content:

use gheith3\FilamentRelationPages\RelationPage;
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Schema;
use Illuminate\Contracts\View\View;

class BuildingSummaryPage extends RelationPage
{
    protected static ?string $title = 'Summary';
    protected static string|BackedEnum|null $icon = 'heroicon-o-chart-bar';

    public function content(Schema $schema): Schema
    {
        return $schema->components([
            Section::make('Overview')->columns(3)->schema([
                TextEntry::make('name')->state($this->ownerRecord->name),
                TextEntry::make('units')->state($this->ownerRecord->units()->count()),
            ]),
        ]);
    }

    public function render(): View
    {
        return view('filament.resources.buildings.building-summary-page');
    }
}

#3 — Register in the Resource

// app/Filament/Resources/BuildingResource.php

public static function getRelations(): array
{
    return [
        RelationPages\BuildingSummaryPage::class,   // ← custom tab
        RelationManagers\UnitsRelationManager::class,
        // ...
    ];
}

That's it. The tab appears in the tab bar alongside your relation managers.


#Blade View

The generated Blade view has two rendering modes:

<div class="space-y-6 p-2">

    {{-- Option A: Filament components — powered by content(Schema $schema) --}}
    {{ $this->content }}

    {{-- Option B: Plain HTML — access the model via $this->ownerRecord --}}
    <div class="p-6">
        <h3>{{ $this->ownerRecord->name }}</h3>
    </div>

</div>

Both modes can be mixed in the same view.


#Available Features

#Tab customisation

protected static ?string $title      = 'My Tab';
protected static ?string $icon       = 'heroicon-o-chart-bar';
protected static ?string $badge      = null;   // static badge text
protected static ?string $badgeColor = 'info';

#Dynamic badge (from a query)

Override getBadge() to compute the badge at runtime:

public static function getBadge(Model $ownerRecord, string $pageClass): ?string
{
    return (string) $ownerRecord->items()->count();
}

#Hide the tab conditionally

public static function canViewForRecord(Model $ownerRecord, string $pageClass): bool
{
    return $ownerRecord->is_active;
}

#Lazy loading

Set $isLazy = true to defer rendering the tab content until the tab is first visited, exactly like Filament's own RelationManager:

protected static bool $isLazy = true;

#Multiple schemas in one page

You can define multiple schema methods — each becomes independently renderable in Blade:

public function stats(Schema $schema): Schema { ... }
public function details(Schema $schema): Schema { ... }
{{ $this->stats }}
{{ $this->details }}

#Pass extra Livewire data

public static function getDefaultProperties(): array
{
    return ['mode' => 'compact'];
}

// Then in the class:
public string $mode = 'compact';

#Artisan Command Reference

# Standard usage
php artisan make:filament-relation-page BuildingSummaryPage --resource=Buildings

# Interactive — prompts for resource name
php artisan make:filament-relation-page BuildingSummaryPage

# Multi-panel apps — places the file inside app/Filament/Admin/Resources/...
php artisan make:filament-relation-page BuildingSummaryPage --resource=Buildings --panel=admin

# Overwrite existing files without being prompted
php artisan make:filament-relation-page BuildingSummaryPage --resource=Buildings --force

#Customising Stubs

Publish the stubs to your project to customise the generated templates:

php artisan vendor:publish --tag=filament-relation-pages-stubs

Stubs are published to stubs/filament-relation-pages/.


#How It Works

Filament calls three static methods on every entry in getRelations():

Method Purpose
canViewForRecord() Should the tab be visible for this record?
getTabComponent() Returns the Tab with label / icon / badge
getDefaultProperties() Extra Livewire props merged on mount
isLazy() Whether to lazy-load the tab content

Then Filament mounts the class as a Livewire component, injecting ownerRecord and pageClass automatically. RelationPage implements HasSchemas + HasActions — the same stack Filament's own RelationManager uses — so all Filament form and infolist components work out of the box.


#Changelog

See CHANGELOG.md.

#Contributing

See CONTRIBUTING.md.

#Security

See SECURITY.md.

#License

MIT — see LICENSE.md.

#Author

Gheith

The author

Gheith avatar Author: Gheith

Laravel developer with over 10 years of experience building robust web applications. Full-stack developer specializing in Laravel and Filament ecosystem development. Passionate about creating developer tools that simplify complex workflows and enhance user experience.

Plugins
3

From the same author