Filament Login Kit

Beautiful, customizable login layouts for Filament v3, v4, and v5. Transform your login page with split layouts, overlays, and flexible positioning.

✨ Features

• 🎨 Multiple Layouts: Split (2-column) and Overlay (full background) modes
• 📐 Flexible Positioning: Image left/right, form top/center/bottom
• 🎯 Background Control: Position, size, and overlay opacity
• 📱 Responsive: Mobile-first design
• 🌙 Dark Mode: Automatic dark mode support
• ⚡ Zero Build: Works without npm/yarn
• 🔧 Easy Config: Simple method chaining
• 🔄 Multi-Version: Supports Filament v3, v4, and v5
• 🚀 Laravel 13 Compatible: Tested and working with Laravel 13
• 🐘 PHP 8.3 Support: Fully compatible with PHP 8.3

📦 Installation

composer require alfianm/filament-login-kit

Requirements

🚀 Quick Start

Add to your Panel Provider:

use AlfianM\FilamentLoginKit\LoginKitPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            LoginKitPlugin::make(),
        ]);
}

🎨 Layout Examples

Split Layout (Default)

LoginKitPlugin::make()
    ->sideImage(asset('images/login-bg.jpg'))
    ->sideImagePosition('left')  // or 'right'

Overlay Layout

LoginKitPlugin::make()
    ->layoutMode('overlay')
    ->sideImage(asset('images/background.jpg'))
    ->overlayOpacity(0.6)

Complete Customization

LoginKitPlugin::make()
    ->sideImage(asset('images/office.jpg'))
    ->sideImagePosition('right')
    ->backgroundPosition('top')
    ->formPosition('center')
    ->formAlignment('left')
    ->heading('Welcome Back')
    ->subheading('Sign in to continue'),

📚 Configuration Options

🔧 Version Compatibility

Filament v3

// app/Providers/Filament/AdminPanelProvider.php
use AlfianM\FilamentLoginKit\LoginKitPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            LoginKitPlugin::make()
                ->sideImage(asset('images/login-v3.jpg'))
                ->sideImagePosition('left'),
        ]);
}

Filament v4

// app/Providers/Filament/AdminPanelProvider.php
use AlfianM\FilamentLoginKit\LoginKitPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            LoginKitPlugin::make()
                ->sideImage(asset('images/login-v4.jpg'))
                ->layoutMode('split'),
        ]);
}

Filament v5

// app/Providers/Filament/AdminPanelProvider.php
use AlfianM\FilamentLoginKit\LoginKitPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            LoginKitPlugin::make()
                ->sideImage(asset('images/login-v5.jpg'))
                ->layoutMode('overlay')
                ->overlayOpacity(0.6),
        ]);
}

📁 File Structure

Place your login background image at:

public/images/login-kit/side-image.jpg

🔧 Publishing Assets

Views

php artisan vendor:publish --tag=filament-login-kit-views

Config

php artisan vendor:publish --tag=filament-login-kit-config

🎨 Customization Examples

Different Images for Different Versions

LoginKitPlugin::make()
    ->sideImage(match(LoginKitServiceProvider::getFilamentVersion()) {
        '3' => asset('images/login-v3.jpg'),
        '4' => asset('images/login-v4.jpg'),
        default => asset('images/login-v5.jpg'),
    }),

Mobile-Optimized Layout

LoginKitPlugin::make()
    ->layoutMode('split')
    ->formPosition('center')
    ->backgroundPosition('center top'),

Dark Theme Optimized

LoginKitPlugin::make()
    ->layoutMode('overlay')
    ->overlayOpacity(0.7)
    ->sideImage(asset('images/dark-bg.jpg')),

🐛 Troubleshooting

Version Detection Issues

If the plugin doesn't detect your Filament version correctly, you can force it:

// In config/login-kit.php
'force_version' => '5', // or '4', '3'

Views Not Loading

Clear the view cache:

php artisan view:clear

CSS Not Applied

Make sure you're extending the correct layout:

protected static string $layout = 'filament-login-kit::components.layout.login';

📝 Changelog

See CHANGELOG.md for detailed changes.

🤝 Contributing

Contributions are welcome! Please see CONTRIBUTING.md for details.

📄 License

MIT License. See LICENSE for details.

🙏 Credits

Created with ❤️ for the Filament community.

🔗 Links

• Documentation
• Report Issues
• Releases