ngankt2/filament-auth-ui

Ngankt2 Auth UI

A beautiful split-layout authentication UI plugin for Filament v4 panels with configurable form position and feature cards.

Screenshots

Form Left Layout

Form Right Layout

Installation

composer require ngankt2/filament-auth-ui

Usage

Add the plugin to your Panel Provider:

use Ngankt2\AuthUi\AuthUIPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(
            AuthUIPlugin::make()
                ->formPosition('left')  // or 'right'
                ->featureCards([
                    [
                        'icon' => 'heroicon-o-academic-cap',
                        'title' => 'Learn Anywhere',
                        'brief' => 'Access courses from any device'
                    ],
                    [
                        'icon' => 'heroicon-o-user-group',
                        'title' => 'Community',
                        'brief' => 'Connect with thousands of learners'
                    ],
                    [
                        'icon' => 'heroicon-o-chart-bar',
                        'title' => 'Track Progress',
                        'brief' => 'Personal dashboard for your journey'
                    ],
                ])
        );
}

Configuration Options

Form Position

->formPosition('left')   // Login form on left (default)
->formPosition('right')  // Login form on right

Feature Cards

Display promotional cards alongside the login form:

->featureCards([
    [
        'icon' => 'heroicon-o-sparkles',  // Any Heroicon
        'title' => 'Card Title',
        'brief' => 'Short description'
    ],
    // ... more cards (recommended: 3-4)
])

If no cards are configured, skeleton placeholders are shown automatically.

Background Image (Legacy)

->backgroundImage('/images/auth-bg.jpg')

Form Styling

->formWidth('400px')           // Form panel width
->formBackgroundColor('#fff')  // Form background color

Social Logins

->socialLogins([
    [
        'url' => '/auth/google',
        'label' => 'Đăng nhập bằng Google',
        'svg' => '<svg viewBox="0 0 24 24" width="20" height="20">...</svg>',
    ],
    [
        'url' => '/auth/facebook',
        'label' => 'Đăng nhập bằng Facebook', 
        'icon' => 'heroicon-o-globe-alt',  // or use svg
        'color' => '#1877F2',  // optional button color
    ],
])

Requirements

• PHP 8.3+
• Laravel 11+
• Filament 4.0+

License

MIT