UI Plus

• Features
  • Dual Sub-Navigation
  • Before Header Actions
  • Action Separator
  • Animated Sidebar / Chevron Animation
  • Animated Notification Bell
  • Sticky Table Actions / Table Horizontal Scroll
  • Loading Bar
  • Disabled Button Shake
• Requirements
• Installation
• Setup
  • 1. Register the plugin
  • 2. Publish the view overrides
  • 3. Add the CSS to your theme
  • 4. Build your theme
• Configuration
• Usage
  • Dual Sub-Navigation
  • Before Header Actions
  • Action Separator
• Upgrade Safety

Enhanced UI components for Filament panels. Adds features that Filament doesn't ship out of the box, designed to be minimally invasive and upgrade-safe.

#Features

#Dual Sub-Navigation

Add a second, independent sub-navigation to any page (sidebar or tabs) alongside Filament's cluster/resource sub-navigation. Both systems render simultaneously in any position combination.

#Before Header Actions

Place actions (like a back button) to the left of the page heading.

#Action Separator

Visual dividers between header actions — vertical line inline, <hr> in dropdowns.

#Animated Sidebar / Chevron Animation

• Smooth collapse/expand width transition for the collapsible sidebar.
• Single rotating chevron replaces Filament's two show/hide buttons.

#Animated Notification Bell

Bell icon swings on hover.

#Sticky Table Actions / Table Horizontal Scroll

• Action column pins to the right edge when tables overflow horizontally.
• Custom scrollbar with trackpad, mouse wheel, and drag support for tables with overflow-x: clip.

#Loading Bar

Livewire request progress bar at the top of the viewport.

#Disabled Button Shake

Tactile shake animation when clicking disabled buttons.

#Requirements

• PHP 8.2+
• Filament 4.x or 5.x
• Laravel 11+

#Installation

Add the repository to your composer.json:

{
    "repositories": [
        {
            "type": "composer",
            "url": "https://filament-ui-plus.composer.sh"
        }
    ]
}

Once the repository has been added to the composer.json file, you can install Filament UI Plus like any other composer package using the composer require command:

composer require leek/filament-ui-plus

You will be prompted to provide your username and password.

Loading composer repositories with package information
Authentication required (filament-ui-plus.composer.sh):
Username: [licensee-email]
Password: [license-key]

The username will be your email address and the password will be equal to your license key. Additionally, you will need to append your fingerprint to your license key. For example, let's say we have the following licensee and license activation:

• Contact email: philo@anystack.sh
• License key: 8c21df8f-6273-4932-b4ba-8bcc723ef500
• Activation fingerprint: anystack.sh

This will require you to enter the following information when prompted for your credentials:

Loading composer repositories with package information
Authentication required (filament-ui-plus.composer.sh):
Username: philo@anystack.sh
Password: 8c21df8f-6273-4932-b4ba-8bcc723ef500:anystack.sh

To clarify, the license key and fingerprint should be separated by a colon (:).

#Setup

#1. Register the plugin

use Leek\FilamentUiPlus\FilamentUiPlusPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->plugin(FilamentUiPlusPlugin::make())
        ->sidebarCollapsibleOnDesktop(); // Required for animated sidebar
}

#2. Publish the view overrides

php artisan vendor:publish --tag=filament-ui-plus-views

#3. Add the CSS to your theme

Add the plugin's CSS import and @source directives to your panel's theme.css:

/* resources/css/filament/{panel}/theme.css */

@import '../../../../vendor/filament/filament/resources/css/theme.css';
@import '../../../../vendor/leek/filament-ui-plus/resources/css/filament-ui-plus.css';

/* ... your existing @source lines ... */

@source '../../../../resources/views/vendor/filament-panels/**/*.blade.php';
@source '../../../../vendor/leek/filament-ui-plus/resources/views/**/*.blade.php';

#4. Build your theme

npm run build

#Configuration

FilamentUiPlusPlugin::make()
    ->loadingBar(false)          // Disable the Livewire loading bar
    ->defaultBackAction(false)   // Disable the automatic back button on HasBeforeHeadingActions pages

All other features are either opt-in via traits (dual sub-navigation, before-header-actions) or passive CSS/JS that only activates when the relevant DOM elements exist.

Note: Even with defaultBackAction(false), pages using HasBeforeHeadingActions can still render a custom back action by overriding getBackAction().

#Usage

#Dual Sub-Navigation

Add the HasPageSubNavigation trait to any Filament page and override getPageSubNavigation():

use Leek\FilamentUiPlus\Concerns\HasPageSubNavigation;
use Filament\Navigation\NavigationItem;
use Filament\Pages\Enums\SubNavigationPosition;

class ReportsPage extends Page
{
    use HasPageSubNavigation;

    public function getPageSubNavigation(): array
    {
        return [
            NavigationItem::make('Funnel Report')
                ->url(FunnelReportPage::getUrl())
                ->isActiveWhen(fn () => request()->routeIs(FunnelReportPage::getRouteName())),
            NavigationItem::make('Attribution Report')
                ->url(AttributionReportPage::getUrl())
                ->isActiveWhen(fn () => request()->routeIs(AttributionReportPage::getRouteName())),
        ];
    }

    public function getPageSubNavigationPosition(): SubNavigationPosition
    {
        return SubNavigationPosition::Start; // Sidebar (default)
        // return SubNavigationPosition::Top;  // Tabs
        // return SubNavigationPosition::End;  // Right sidebar
    }
}

This works completely independently of Filament's cluster/resource sub-navigation. Both systems can render simultaneously in any position combination — both Start, both Top, or any mix.

#Before Header Actions

Add the HasBeforeHeadingActions trait to place actions before the page heading:

use Leek\FilamentUiPlus\Concerns\HasBeforeHeadingActions;
use Filament\Actions\Action;

class ClientDetailPage extends Page
{
    use HasBeforeHeadingActions;

    // Default: renders a circular back button (history.back())
    // Override to customize:
    protected function getBackAction(): ?Action
    {
        return $this->makeDefaultBackAction()
            ->url(ClientResource::getUrl('index'));
    }
}

#Action Separator

Drop a visual divider between header actions:

use Leek\FilamentUiPlus\Actions\ActionSeparator;

protected function getHeaderActions(): array
{
    return [
        Action::make('create')->label('New Lead'),
        ActionSeparator::make(),
        Action::make('export')->label('Export'),
    ];
}

Renders as a vertical 1px line in inline action rows, or an <hr> inside dropdown menus.

#Upgrade Safety

7 of 10 features require zero view overrides and will survive Filament upgrades without changes.

View-override features are clearly marked with [UI Plus] comments for easy diffing when Filament updates.