Filament Auth UI Enhancer: Beautiful Login & Registration Pages In Minutes

The default Filament auth pages are clean and functional, but they all look
the same across projects. If you are building a client‑facing admin, a SaaS
dashboard, or anything where first impressions matter, the login and
registration screens are usually the most visible part of your Filament panel.

The Auth UI Enhancer plugin by Diogo Pinto focuses on one thing: giving you a
flexible, beautiful layout for your auth screens without touching Filament’s
authentication logic.

In this guide, we will cover:

• What the plugin actually does (and what it doesn’t)

• How to install and wire it into a Filament panel

• How it behaves with default vs custom auth pages

• How to customize the layout (form panel, empty panel, colors, etc.)

• A complete example configuration you can copy into your project

• Practical styling tips for production

What the auth ui enhancer plugin does

Conceptually, the plugin replaces Filament’s default auth views with a
two‑panel layout:

• Form panel
  The side that contains the actual auth form (login, registration, password
  reset, etc.). This is where your fields, buttons, and error messages live.

• Empty panel
  A flexible visual side. You can keep it as a flat color, add a background
  image, or render a fully custom Blade view with your own logo, copy, and
  marketing content.

The plugin gives you a fluent API to control:

• The form panel position (left or right)

• The form panel width on desktop

• The order of form vs empty panel on mobile

• The form panel background color

• The visuals for the empty panel (color, image, custom view, visibility)

Important: this package is UI‑only. It does not change how authentication
works in Filament:

• Your guards, providers, and password brokers remain untouched.

• Any custom auth logic you have (extra fields, events, tracking) stays in
  your own page classes.

• The plugin is responsible only for layout and styling.

Version compatibility

At the time of writing, the plugin supports:

• Plugin 2.x → Filament 4.x, PHP 8.2+

• Plugin 1.x → Filament 3.x, PHP 8.1+

Match the plugin major version to your Filament major version. Always confirm
the “Version Compatibility” table on the plugin page or GitHub if you are on a
newer Filament or PHP version.

Install the plugin using composer

Choose the version that matches your Filament panel.

For Filament 4:

composer require diogogpinto/filament-auth-ui-enhancer:"^2.0"

For Filament 3:

composer require diogogpinto/filament-auth-ui-enhancer:"^1.0"

That’s all for installation. Next, you integrate it with your Filament theme
and panel provider.

Ensure you got a custom filament theme setup

Auth UI Enhancer plugs into Filament’s theming system, so you should already
have a custom theme set up for your panel.

If you do not have one yet:

• Follow the Filament docs for creating a custom theme for your panel.

• You will end up with a CSS entry file, for example:
  resources/css/filament/admin/theme.css

• Tailwind will compile this file into your panel’s CSS bundle.

Once your custom theme is in place, we need to tell Tailwind to scan the
plugin’s Blade views so its classes are not purged.

1. ADD THE PLUGIN’S VIEWS TO YOUR THEME SOURCES

Open your panel theme CSS file, for example:

resources/css/filament/admin/theme.css

Add the plugin’s source directive so Tailwind sees the plugin’s Blade files:

Open your panel theme CSS file, for example:

resources/css/filament/admin/theme.css

Add the plugin’s source directive so Tailwind sees the plugin’s Blade files:

@source '../../../../vendor/diogogpinto/filament-auth-ui-enhancer/resources/**/*.blade.php';

Adjust the relative path if your theme file is in a different directory depth.

Then rebuild your assets:

npm run build //or npm run dev

If you skip this step, the auth pages will load but most of the Tailwind
classes from the plugin will be purged, and the layout will look broken.

Register the filament plugin

Next, wire the plugin into your Filament panel provider.

Open your panel provider class. For a typical admin panel, it might be:

app/Providers/Filament/AdminPanelProvider.php

Add the plugin in the plugins() call inside the panel() method:

<?php

namespace App\Providers\Filament;

use DiogoGPinto\AuthUIEnhancer\AuthUIEnhancerPlugin;
use Filament\Panel;
use Filament\PanelProvider;
use Filament\Support\Colors\Color;

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // Your existing configuration…
            ->plugins([
                AuthUIEnhancerPlugin::make(),
            ]);
    }
}

Default vs custom auth pages

How the plugin discovers and applies itself to your auth pages depends on how
you have configured authentication in your panel provider.

Using Filament’s default auth pages

If your panel is configured like this:

$panel
    ->login()
    ->registration()
    ->emailVerification()
    ->resetPassword();

and you are not passing your own custom page classes to these methods, the
plugin will automatically enhance these default auth pages.

In many cases, you do not need any extra work—just install the plugin, add it
to plugins(), and enjoy the new layout.

Using custom auth page classes

If you have custom auth page classes wired in, for example:

$panel
    ->login(\App\Filament\Auth\Login::class)
    ->registration(\App\Filament\Auth\Register::class);

The plugin will not override them automatically. This is by design: you
already have custom logic and you explicitly opt in to the enhanced layout.

To do that, the plugin exposes a trait you can add to your auth pages.

Example: enhancing a custom login page layout

<?php

namespace App\Filament\Auth;

use DiogoGPinto\AuthUIEnhancer\Pages\Auth\Concerns\HasCustomLayout;
use Filament\Pages\Auth\Login as BaseLogin;

class Login extends BaseLogin
{
    use HasCustomLayout;

    // Your existing customizations: form(), authenticate(), etc.
}

Repeat this pattern for any other custom auth pages that extend Filament’s
base auth pages and that you want to enhance.

Result:

• Your business logic stays inside your auth page classes.

• The plugin takes over only the layout and UI structure.

Customizing the form panel

Once the plugin is registered, you can configure it via a fluent API directly
on the plugin instance. All these methods are chained from
AuthUIEnhancerPlugin::make().

You typically do this inside your panel provider’s plugins() call.

Form panel position (left or right)

Control which side of the screen the auth form appears on:

AuthUIEnhancerPlugin::make()
    ->formPanelPosition('left');

// or

AuthUIEnhancerPlugin::make()
    ->formPanelPosition('right');

Form panel position on mobile

On mobile, you might prefer the form first or the visual side first:

AuthUIEnhancerPlugin::make()
    ->mobileFormPanelPosition('top');

// or

AuthUIEnhancerPlugin::make()
    ->mobileFormPanelPosition('bottom');

Form panel width

On larger screens, you can shrink or enlarge the form panel to create more or
less visual emphasis on the empty panel:

AuthUIEnhancerPlugin::make() ->formPanelWidth('40%');

You can use any valid CSS unit: %, px, rem, em, vw, etc.

Form panel background color

The plugin integrates with Filament’s color helpers so you can keep everything
consistent with your panel theme.

Example using Filament’s predefined colors:

use Filament\Support\Colors\Color;

AuthUIEnhancerPlugin::make()
    ->formPanelBackgroundColor(Color::Zinc, '300');

Example using a custom HEX color:

AuthUIEnhancerPlugin::make()->formPanelBackgroundColor(Color::hex('#050816'));

Customizing the empty panel

The empty panel is where you bring branding and personality to your auth
experience.

Typical uses:

• A solid brand‑colored background

• A background image (gradient, dashboard screenshot, product artwork)

• A custom Blade view with your logo, tagline, and a short marketing blurb

• A simple pattern or illustration on desktop, hidden on mobile

The plugin exposes methods to configure:

• Empty panel background color

• Background image path / URL and opacity

• Custom view to render inside the empty panel

• Whether to hide the empty panel on mobile devices

The exact method names are documented in the plugin’s README, but the pattern
is the same as with the form panel: chain calls on the
AuthUIEnhancerPlugin::make() instance in your panel provider.

A common pattern:

• Dark brand color on the empty panel

• Subtle overlay image (e.g., product screenshot with reduced opacity)

• Small Blade partial that renders:

  • Your logo

  • One headline with what this app does

  • One supporting line about security or support

1. Complete example: branded version

Here is a realistic configuration you can drop into an existing Filament
project and customize.

app/Providers/Filament/AdminPanelProvider.php:

<?php

namespace App\Providers\Filament;

use DiogoGPinto\AuthUIEnhancer\AuthUIEnhancerPlugin;
use Filament\Panel;
use Filament\PanelProvider;
use Filament\Support\Colors\Color;

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->id('admin')
            ->path('admin')

            // Use Filament’s default auth pages
            ->login()
            ->registration()
            ->emailVerification()
            ->resetPassword()

            ->plugins([
                AuthUIEnhancerPlugin::make()
                    // Place the form on the left, visuals on the right
                    ->formPanelPosition('left')
                    // On mobile, show the form first
                    ->mobileFormPanelPosition('top')
                    // Slightly narrower form area for a more “hero” look
                    ->formPanelWidth('42%')
                    // Light background that matches your app’s theme
                    ->formPanelBackgroundColor(Color::Zinc, '50'),
            ]);
    }
}

From here, you can extend the configuration using empty panel options in the
plugin docs:

• Set a background image on the empty panel (your product screenshot).

• Render a Blade partial with your logo and short copy.

• Hide the empty panel for very small screens if you want a single‑column
  layout on mobile.

A few practical tips when polishing your auth UI for production.

Performance and assets

• Keep background images optimized and as small as reasonably possible.

• Use modern formats (WebP) where supported.

• Host assets on your own domain or a reliable CDN for consistent performance.

Light and dark mode

• Test both light and dark themes with your chosen colors.

• Use Filament’s Color:: helpers wherever possible for consistent palettes.

• Check contrast for text on top of backgrounds (especially on the empty
  panel if you render copy on top of an image).

Auth logic stays where it belongs

• Keep validation and authentication logic inside your auth page classes.

• Use middleware, guards, and rate limiting as usual.

• Think of Auth UI Enhancer as “the layout engine” for your login stack, not
  the place where security rules live.