Filament has 66 Render Hooks to customize your page design. But how do you know where EXACTLY the hook would be shown? We created a visual "cheat sheet" for you!
First, if you're new to render hooks, here's a simple example of how to add a simple div
to the topbar end:
app/Providers/Filament/AdminPanelProvider.php
use Filament\View\PanelsRenderHook; // ... return $panel ->default() ->id('admin') ->path('admin') // ... ->renderHook(PanelsRenderHook::TOPBAR_END, function () { return Blade::render('<div style="border: solid red 1px; padding: 5px;">{{ $text }}</div>', [ 'text' => 'New Position', ]); });
Note: You can pass a View there too.
You can read more in the Filament Official Documentation or our tutorials.
Look at ALL render hooks on one page.
You can click the image to open it in a new tab for zooming.
For pages like the login form, there's another set of hooks.
Image is also clickable for zooming
Separately, there are a few more specific hooks inside the Auth forms.
Registration page
Reset Password page
A few more hooks are missing, specific to when you click to open the profile menu
If you want to see all of these Render Hooks in your application, you can use our snippet:
app/Providers/Filament/AdminPanelProvider.php
use Filament\View\PanelsRenderHook;use ReflectionClass; // ... class AdminPanelProvider extends PanelProvider{ public function panel(Panel $panel): Panel { $panel // Your Panel configuration $hooks = new ReflectionClass(PanelsRenderHook::class); $hooks = $hooks->getConstants(); foreach ($hooks as $hook) { $panel->renderHook($hook, function () use ($hook) { return Blade::render('<div style="border: solid red 1px; padding: 5px;">{{ $name }}</div>', [ 'name' => $hook, ]); }); } return $panel; }}
You can take the complete project here on GitHub and play around with it yourself.
If you want to read more about changing the Filament theme design, here are a few helpful links:
Free Resources:
Premium Resources:
A few of our Premium Examples: