Filament 4 and 5 · Laravel 11, 12, and 13

The Fascia admin look, on Filament

Designed for teams who spend hours in their admin panel, Fascia pairs elegant visuals with practical navigation. Switch between a compact icon rail or a spacious accordion sidebar, enjoy beautifully crafted light and dark themes, and give your Filament app a polished, professional feel.

Get a license — from $19 Live Demo ↗

Fascia compact layout: 120px icon rail, white content, purple primary, and a sales dashboard — Compact layout. 120px rail, icon above a 13px label, dashboard on a #f8f9fa page.

Look and feel

Same chrome Fascia uses, on Filament panels

The page is 13px Nunito. Cards sit on a quiet shadow, 0 4px 20px 1px at 6% black, with a 10px radius. Primary actions and the active rail item use #663399.

Layout	How the menu works
Compact	A 120px rail. Each parent is a Tabler icon with a label under it. Hover opens a 230px white flyout. Click pins it. A triangle marks the open section.
Large	A 260px sidebar. Section labels are uppercase. Items accordion in place, icon then label.
Phone	Both layouts become an off-canvas drawer with a dimmed backdrop. Targets are at least 44px. Compact keeps the icon rail and shows children beside it.

Layout

How the menu works

Compact

A 120px rail. Each parent is a Tabler icon with a label under it. Hover opens a 230px white flyout. Click pins it. A triangle marks the open section.

Large

A 260px sidebar. Section labels are uppercase. Items accordion in place, icon then label.

Phone

Both layouts become an off-canvas drawer with a dimmed backdrop. Targets are at least 44px. Compact keeps the icon rail and shows children beside it.

Compact rail with the UI kits flyout open, listing Alerts, Buttons, Badges, Cards, Forms, and Tables — Hover previews a section. Click pins the flyout. Click again to close it.

Large Fascia sidebar with uppercase groups and an open Dashboards accordion, customizer open — Large mode. 260px sidebar, accordion children, and the customize tab.

Fascia dashboard in dark mode with a dark page, dark cards, and the Light Dark switch set to Dark — Dark mode. Page, cards, charts, and forms switch together. The choice is remembered.

Purple sidebar skin on the large Fascia layout — Sidebar skins. Light, purple, midnight, indigo, pink, slate, and a purple–indigo gradient. The flyout stays white.

Fascia on a phone: stacked revenue, orders, products, and customers cards, with the sales chart starting below — On a phone the dashboard stacks. The hamburger opens the menu.

Features

What the theme changes

Two menus, one plugin

Compact is the default. Large is a click away. The hamburger on desktop pins the flyout or slides the large sidebar away, instead of using Filament’s own collapse.

Tabler icons, one size per slot

Outline icons from the same 24×24 grid. 26px on the rail, 18px in the flyout, 20px in the large sidebar, 22px in the top bar.

Light and dark

A Light / Dark switch sits in the top bar. It is also on the sign-in screen and in Customize. Stored as fascia-mode.

Seven sidebar skins

Light, purple, midnight, indigo, pink, slate, and gradient. Stored as fascia-skin. Set customizer to false to hide the gear tab.

Filament components, Fascia surfaces

Tables, alerts, buttons, badges, cards, and forms keep Filament behavior and pick up the Nunito type, purple primary, and soft cards.

No panel rebuild

CSS and a small menu script load through Filament render hooks. Register the plugin and the chrome is there.

Orders table with status pills, search, and the Fascia sidebar — Tables. Status pills, a search field, and the same card shadow as the dashboard.

Info, success, warning, and danger alerts inside Fascia cards — Alerts. Info, success, warning, and danger, each on a tinted surface.

Fascia form with two columns, validation, and primary, secondary, and success buttons — Forms. Two-column fields, inline errors, and the purple primary button.

Primary, secondary, success, danger, and ghost buttons plus status badges — Buttons and badges. Primary, secondary, success, danger, and ghost.

Menus

How to build the rail

Filament only prints child links when the parent has no URL. Parents used as rail sections must not have a URL, or the flyout stays empty until you are already inside it.

Do not put an icon on the navigation group

Filament throws if a group and its items both have icons. Put Tabler icons on the parent item and on each child. Groups should be collapsible(false) so a section header cannot hide the rail.

use Filament\Navigation\NavigationGroup;
use Spiggle\FilamentFasciaTheme\Fascia;

$panel->navigationGroups([
    NavigationGroup::make('Applications')->collapsible(false)->items([
        Fascia::parent('Dashboards', 'tabler-chart-bar', [
            Fascia::link('Version 1', 'tabler-layout-dashboard', '/admin'),
            Fascia::link('Version 2', 'tabler-report-analytics', '/admin/sales'),
        ]),
        Fascia::parent('UI kits', 'tabler-stack-2', [
            Fascia::link('Alerts', 'tabler-alert-triangle', '/admin/alerts'),
            Fascia::link('Tables', 'tabler-table', '/admin/orders'),
        ]),
        Fascia::link('Charts', 'tabler-chart-dots-3', '/admin/charts'),
    ]),
]);

Pricing

Choose the right license for your projects

Two plans, full theme files, light and dark mode, and 1 year of updates.

Single Site

One production application or client dashboard.

$19 / site

Includes 1 year of updates

1 production panel
1 year of updates and security fixes
Compact rail, flyout, and large sidebar
Light and dark mode, seven skins
Filament 4 and Filament 5

Buy Single Site — $19

Unlimited Projects

Freelancers, agencies, and teams with more than one panel.

$49 / year

1 year of updates on every project

Unlimited client and internal projects
1 year of updates across all sites
Compact rail, flyout, and large sidebar
Light and dark mode, seven skins
Filament 4 and Filament 5
Priority support from the maintainer

Buy Unlimited Projects — $49

Each button opens its Lemon Squeezy checkout in a new tab.

Install

Install the package

PHP 8.2 or newer. Laravel 11, 12, or 13. Filament 4 or 5. Fascia attaches itself to every panel.

1. Require the package and Tabler icons

composer require spiggle/filament-fascia-theme
composer require secondnetwork/blade-tabler-icons
php artisan filament:assets

2. Optional: pin it to one panel

// config: 'auto_register' => false
use Spiggle\FilamentFasciaTheme\FilamentFasciaThemePlugin;

$panel->plugin(FilamentFasciaThemePlugin::make());

Theme switcher

Install spiggle/filament-theme-switcher and Fascia shows up in the header menu. The switcher attaches itself to every Filament 5 panel. It only lists themes that register, which Fascia and Soffit do. Fascia’s rail and stylesheet load only while Fascia is selected. Filament’s light/dark control stays separate.

Defaults

Layout and skin defaults live in config/filament-fascia-theme.php. Visitors can still switch them. FASCIA_LAYOUT is compact or large. GULL_SIDEBAR is one of the skins below.

Light
Purple
Midnight
Indigo
Pink
Slate
Gradient

Why is the flyout empty?

The parent NavigationItem has a URL. Leave the URL off parents that should open children. Fascia::parent() does this for you.

Why did Filament reject the icons?

A navigation group and its items cannot both have icons. Leave the group icon off. Put icons on the parent and on each child.

How does the license work?

Single Site is $19 for one production panel. Unlimited Projects is $49 for unlimited client and personal panels. Both include 1 year of updates and security fixes.

Where is dark mode stored?

In the browser, under fascia-mode. Layout is fascia-layout. Sidebar skin is fascia-skin. Nothing is written to the database.