PHPackages                             diogogpinto/filament-auth-ui-enhancer - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Authentication & Authorization](/categories/authentication)
4. /
5. diogogpinto/filament-auth-ui-enhancer

ActiveLibrary[Authentication & Authorization](/categories/authentication)

diogogpinto/filament-auth-ui-enhancer
=====================================

This Filament plugin empowers you to transform your auth pages with ease, allowing you to make them truly stand out. It offers a flexible alternative to the default auth pages in the Filament Panels package.

v2.0.2(4mo ago)13493.9k↓10.1%14[1 issues](https://github.com/diogogpinto/filament-auth-ui-enhancer/issues)4MITPHPPHP ^8.2CI passing

Since Oct 22Pushed 4mo ago8 watchersCompare

[ Source](https://github.com/diogogpinto/filament-auth-ui-enhancer)[ Packagist](https://packagist.org/packages/diogogpinto/filament-auth-ui-enhancer)[ Docs](https://github.com/diogogpinto/filament-auth-ui-enhancer)[ GitHub Sponsors](https://github.com/diogogpinto)[ RSS](/packages/diogogpinto-filament-auth-ui-enhancer/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (6)Dependencies (7)Versions (13)Used By (4)

Auth UI Enhancer for Filament Panels 🔥
======================================

[](#auth-ui-enhancer-for-filament-panels-)

[![Latest Version on Packagist](https://camo.githubusercontent.com/a9048c9ae476992630b760fe237d777ed3ba490e39378b7bd601e068c6741677/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f64696f676f6770696e746f2f66696c616d656e742d617574682d75692d656e68616e6365722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/diogogpinto/filament-auth-ui-enhancer)[![GitHub Tests Action Status](https://camo.githubusercontent.com/6818049b8206e99df8402bca929925c043a19a8b2fb482cbfbcebc1a5329a694/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f64696f676f6770696e746f2f66696c616d656e742d617574682d75692d656e68616e6365722f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/diogogpinto/filament-auth-ui-enhancer/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/39b443cfcb0e1aee58d462ff943511d03d1387534399fb7b2662eb0c620768d0/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f64696f676f6770696e746f2f66696c616d656e742d617574682d75692d656e68616e6365722f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/diogogpinto/filament-auth-ui-enhancer/actions?query=workflow%3A%22Fix+PHP+code+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/d59edad97cccb7de05ea1ff07de9314ee5eb0fd6e956e92436a2164971d3e8f5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f64696f676f6770696e746f2f66696c616d656e742d617574682d75692d656e68616e6365722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/diogogpinto/filament-auth-ui-enhancer)

[![Filament Auth UI Enhancer](/art/auth-ui-enhancer.webp)](/art/auth-ui-enhancer.webp)

Looking for an easy way to customize the UI of your Auth Pages in your Filament Panel?
--------------------------------------------------------------------------------------

[](#looking-for-an-easy-way-to-customize-the-ui-of-your-auth-pages-in-your-filament-panel)

This Filament plugin empowers you to transform your auth pages with ease, allowing you to make them truly stand out. It offers a flexible alternative to the default auth pages in the Filament Panels package.

Setting it up is a breeze, and it comes packed with a variety of customizable features—plus, there’s a lot more to come! 🔥

### Check out some examples you can create right out of the box:

[](#check-out-some-examples-you-can-create-right-out-of-the-box)

[![Auth UI Enhancer Examples](/art/auth-ui-enhancer-examples.webp)](/art/auth-ui-enhancer-examples.webp)

Navigation
----------

[](#navigation)

- [Version Compatibility](#version-compatibility)
- [Installation](#installation)
- [Usage](#usage)
    - [AuthPage Discovery](#auth-page-discovery)
- [Customizing the Auth UI](#customizing-the-auth-ui)
    - [Customizing the Form Panel](#customizing-the-form-panel)
    - [Customizing the Empty Panel](#customizing-the-empty-panel)
- [Further Customization - CSS](#further-customization---css)
- [Working Examples](#working-example)
- [Todo](#todo)
- [Changelog](#changelog)
- [Contributing](#contributing)
- [Security Vulnerabilities](#security-vulnerabilities)
- [Credits](#credits)
- [License](#license)

Version Compatibility
---------------------

[](#version-compatibility)

Plugin VersionFilament VersionPHP Version`^2.0``^4.0` | `^5.0``^8.2``^1.0``^3.0``^8.1`Installation
------------

[](#installation)

Start by installing the plugin via composer:

```
composer require diogogpinto/filament-auth-ui-enhancer
```

In an effort to align with Filament's theming methodology you will need to use a custom theme to use this plugin.

Important

If you have not set up a custom theme, follow the instructions in the [Filament Docs](https://filamentphp.com/docs/5.x/styling/overview) first.

1. Add the following to your `theme.css` file:

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

Important

The above content should be placed in your filament theme's `theme.css` file, under the /resources/css/filament/{panel-name} path

2. Run `npm run build` in your terminal

Usage
-----

[](#usage)

To start using the plugin, you need to add the plugin to your plugins array in your filament panel.

```
use DiogoGPinto\AuthUIEnhancer\AuthUIEnhancerPlugin;

 ->plugins([
    AuthUIEnhancerPlugin::make(),
])
```

### Auth Page Discovery

[](#auth-page-discovery)

#### Default Auth Logic

[](#default-auth-logic)

If you don't have any custom classes on the auth methods of your Filament panel (login(), registration(), resetPassword() and emailVerification()), this plugin will work almost out of the box.

If your panel provider is setup like below, this plugin will automatically apply the changes to your UI.

```
$panel
    ->login()
    ->registration()
```

#### Custom Auth Logic

[](#custom-auth-logic)

If you have custom logic in the mentioned methods, there is a simple way to make that UI pop, using a simple trait from this plugin. If your panel looks like the below:

```
$panel
    ->login(YourLoginClass::class)
```

Just add the following trait to `YourLoginClass`:

```
use DiogoGPinto\AuthUIEnhancer\Pages\Auth\Concerns\HasCustomLayout;

class YourLoginClass extends BaseLogin
{
    use HasCustomLayout;
}
```

Customizing the Auth UI
-----------------------

[](#customizing-the-auth-ui)

The view for this package divides your screen in two sections:

- Form Panel - The panel that contains the form
- Empty Panel - The panel that contains the image

### Customizing the Form Panel

[](#customizing-the-form-panel)

You can customize:

- The [form panel position](#form-position) in both desktop and mobile
- The [form panel width](#form-panel-width) in desktop
- The [form panel background color](#form-panel-background-color)

#### Form Position

[](#form-position)

[!['Form Position Examples'](/art/auth-ui-enhancer-left-right-form.webp)](/art/auth-ui-enhancer-left-right-form.webp)

You can make the form appear on the left side of the page or in the right side of the page.

```
->formPanelPosition('left')
```

#### Form Position on Mobile

[](#form-position-on-mobile)

[!['Mobile Form Position Examples'](/art/auth-ui-enhancer-top-bottom-mobile.webp)](/art/auth-ui-enhancer-top-bottom-mobile.webp)

On mobile devices, you can chose if the form appears above the empty container or below.

```
->mobileFormPanelPosition('bottom')
```

This method accepts `top` or `bottom` as arguments. You can also hide the empty panel on mobile (see below).

#### Form Panel Width

[](#form-panel-width)

[!['Form Width Examples'](/art/auth-ui-enhancer-form-width.webp)](/art/auth-ui-enhancer-form-width.webp)

The form panel width has a default value of `50%`. You can change it by adding the following method and passing the desired width.

```
->formPanelWidth('40%')
```

Sizes must be expressed in rem, %, px, em, vw, vh or pt.

#### Form Panel Background Color

[](#form-panel-background-color)

[!['Form Background Color Examples'](/art/auth-ui-enhancer-form-background.webp)](/art/auth-ui-enhancer-form-background.webp)

You can change the form panel background color by using the following method:

```
use Filament\Support\Colors\Color;

->formPanelBackgroundColor(Color::Zinc, '300')
```

In this case, 300 is the shade of the color you want to use.

You can also set the color using HEX or RGB, like in a typical filament panel:

```
use Filament\Support\Colors\Color;

->formPanelBackgroundColor(Color::hex('#f0f0f0'))
```

### Customizing the Empty Panel

[](#customizing-the-empty-panel)

You can customize:

- The [empty panel background color](#empty-panel-background-color)
- The [empty panel background image and its opacity](#empty-panel-background-image-and-image-opacity)
- The [empty panel view](#empty-panel-custom-view)
- Either to [show or hide empty panel on mobile](#hide-empty-panel-on-mobile-devices)

#### Empty Panel Background Image and Image Opacity

[](#empty-panel-background-image-and-image-opacity)

[!['Empty Panel Background Examples'](/art/auth-ui-enhancer-empty-panel-background-image.webp)](/art/auth-ui-enhancer-empty-panel-background-image.webp)

You can set an image to be displayed on the empty panel, and control its opacity.

```
->emptyPanelBackgroundImageUrl('images/login.webp')
```

You can pass an asset URL with Laravel's `asset('images/login.webp')` function.

If you would like to change the image opacity, you can use the following method:

```
->emptyPanelBackgroundImageOpacity('50%')
```

#### Empty Panel Background Color

[](#empty-panel-background-color)

[!['Empty Panel Background Color Examples'](/art/auth-ui-enhancer-empty-panel-background-color.webp)](/art/auth-ui-enhancer-empty-panel-background-color.webp)

The default background color is your panel's primary color. You can change the empty panel background color by using the following method:

```
use Filament\Support\Colors\Color;

->emptyPanelBackgroundColor(Color::Zinc, '300')
```

In this case, 300 is the shade of the color you want to use.

You can also set the color using HEX or RGB, like in a typical filament panel:

```
use Filament\Support\Colors\Color;

->emptyPanelBackgroundColor(Color::hex('#f0f0f0'))
```

#### Empty Panel Custom View

[](#empty-panel-custom-view)

[!['Empty Panel View Examples'](/art/auth-ui-enhancer-empty-view.webp)](/art/auth-ui-enhancer-empty-view.webp)

You can decide to use a custom view inside the empty panel instead of a background. Decide which view to use by using the following method:

```
->emptyPanelView('view')
```

The method only accepts the view name as a parameter. If both background image and custom view are provided, the plugin will prioritize the view.

#### Hide Empty Panel on Mobile Devices

[](#hide-empty-panel-on-mobile-devices)

You can just use the following method, so the empty panels disappears on mobile and the form container spans to full height:

```
->showEmptyPanelOnMobile(false)
```

Further Customization - CSS
---------------------------

[](#further-customization---css)

You can create further customizations in your theme's CSS file. The following classes are available:

```
/* Whole page wrapper */
.custom-auth-wrapper {
}

/* Empty panel wrapper */
.custom-auth-empty-panel {
}

/* Form panel wrapper */
.custom-auth-form-panel {
}

/* Form wrapper */
.custom-auth-form-wrapper {
}
```

Working Example
---------------

[](#working-example)

If you're just looking to plug and play some code into your Filament Panel, here's a working code so you can just insert into your plugins array:

```
use DiogoGPinto\AuthUIEnhancer\AuthUIEnhancerPlugin;
$panel
    ->plugins([
        AuthUIEnhancerPlugin::make()
            ->showEmptyPanelOnMobile(false)
            ->formPanelPosition('right')
            ->formPanelWidth('40%')
            ->emptyPanelBackgroundImageOpacity('70%')
            ->emptyPanelBackgroundImageUrl('https://images.pexels.com/photos/466685/pexels-photo-466685.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2')
    ]);
```

Warning

This is a random image URL I got from Pexels. If you want to use it in production or commercially you should check its license.

Todo
----

[](#todo)

- Develop different layouts

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Diogo Pinto](https://github.com/diogogpinto) - you can follow me on [Twitter](https://x.com/diogogpinto)
- [Joao Patrício](https://github.com/ijpatricio) for his amazing support
- [CodeWithDennis](https://github.com/CodeWithDennis) for his early contributions
- [Alexandre](https://github.com/alexandrevega) for making the `views` feature possible
- [Jicoy](https://github.com/Jicoy) for his contribution on v4 upgrade
- [Davide Prevosto](https://github.com/davideprevosto) for his contribution on v5 upgrade
- [Geridoc](https://www.geridoc.pt) for allowing me to release our packages with Open Source licenses
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

56

—

FairBetter than 98% of packages

Maintenance77

Regular maintenance activity

Popularity49

Moderate usage in the ecosystem

Community27

Small or concentrated contributor base

Maturity59

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 61.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~64 days

Recently: every ~38 days

Total

8

Last Release

121d ago

Major Versions

v1.0.2 → 3.x-dev2025-08-17

3.x-dev → 4.x-dev2025-08-17

PHP version history (2 changes)v1.0.0PHP ^8.1

4.x-devPHP ^8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/54b4f8f3cd85d6caa1276d4ef844851e34530fedcd92ec1082ef665ec95d6d9d?d=identicon)[diogogpinto](/maintainers/diogogpinto)

---

Top Contributors

[![diogogpinto](https://avatars.githubusercontent.com/u/74505947?v=4)](https://github.com/diogogpinto "diogogpinto (63 commits)")[![CodeWithDennis](https://avatars.githubusercontent.com/u/23448484?v=4)](https://github.com/CodeWithDennis "CodeWithDennis (20 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (8 commits)")[![alexandrevega](https://avatars.githubusercontent.com/u/8642690?v=4)](https://github.com/alexandrevega "alexandrevega (5 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (5 commits)")[![davideprevosto](https://avatars.githubusercontent.com/u/28837345?v=4)](https://github.com/davideprevosto "davideprevosto (1 commits)")[![joaopaulolndev](https://avatars.githubusercontent.com/u/11706937?v=4)](https://github.com/joaopaulolndev "joaopaulolndev (1 commits)")

---

Tags

filamentfilament-pluginfilament-pluginsfilamentphpfilamentphp-pluginlaravellaravelfilamentfilament-plugindiogogpintofilament-auth-ui-enhancer

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/diogogpinto-filament-auth-ui-enhancer/health.svg)

```
[![Health](https://phpackages.com/badges/diogogpinto-filament-auth-ui-enhancer/health.svg)](https://phpackages.com/packages/diogogpinto-filament-auth-ui-enhancer)
```

###  Alternatives

[bezhansalleh/filament-shield

Filament support for `spatie/laravel-permission`.

2.8k2.9M88](/packages/bezhansalleh-filament-shield)[croustibat/filament-jobs-monitor

Background Jobs monitoring like Horizon for all drivers for FilamentPHP

254255.2k6](/packages/croustibat-filament-jobs-monitor)[stephenjude/filament-two-factor-authentication

Filament Two Factor Authentication: Google 2FA + Passkey Authentication

81158.7k4](/packages/stephenjude-filament-two-factor-authentication)[marcelweidum/filament-passkeys

Use passkeys in your filamentphp app

5925.8k](/packages/marcelweidum-filament-passkeys)[caresome/filament-auth-designer

Transform Filament's default auth pages into stunning, brand-ready experiences

3916.8k2](/packages/caresome-filament-auth-designer)[afatmustafa/filamentv3-turnstile

A plugin to help you implement the Cloudflare Turnstile into your Filament panels.

1525.8k](/packages/afatmustafa-filamentv3-turnstile)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)