Filament Custom Edit Profile Page: Multiple Forms and Full-Page Design

Filament 3 has authentication features that you can easily enable, like the Profile page. But its default design is the same as the login/register page. What if we want to use the full-page design, with menus, for the Edit Profile page, too? Let's see how to do it.

This is how it looks by default:

default filament profile page

What if we want to use the "full" Filament design with menus on the left? Also, we can go one step further and have form layouts similar to Laravel Breeze:

breeze profile page

So, we have two goals for this tutorial:

Let's go!


Custom Page for Edit Profile Page

So first, let's create a new custom page.

php artisan make:filament-page EditProfile --type=custom

Don't choose any Resource.

This command created two files:

  • App\Filament\Pages\EditProfile.php - A Livewire component's PHP class where all the logic goes.
  • resources\filament\pages\edit-profile.blade.php - a View file where the front-end code goes.

Next, let's change Filament panels settings so the profile link goes to our custom page.

app/Providers/Filament/AdminPanelProvider.php:

use App\Filament\Pages\EditProfile;
 
class AdminPanelProvider extends PanelProvider
{
public function panel(Panel $panel): Panel
{
return $panel
->default()
->id('admin')
->path('admin')
->login()
->profile()
->userMenuItems([
'profile' => MenuItem::make()->url(fn (): string => EditProfile::getUrl())
])
// ...
}
}

After visiting the Edit Profile page, you should see our custom page with the heading text Edit Profile.

empty custom profile page


Showing Multiple Forms on One Page

Next, let's add forms to our custom page. Because the custom page is a Livewire component, we must prepare it to...

The full tutorial [8 mins, 1525 words] is only for Premium Members

Login Or Become a Premium Member for $129/year or $29/month
What else you will get:
  • 60 courses (1084 lessons, total 42 h 44 min)
  • 80 long-form tutorials (one new every week)
  • access to project repositories
  • access to private Discord

Recent Premium Tutorials