Stature Theme plugin screenshot
Dark mode ready
Multilingual support
Supports v5.x

Stature Theme

Community

A polished, compact control-panel theme for Filament 5.

Tags: Theme Panels
Supported versions:
5.x
Third-party plugin. This is built by the community, not the Filament team. Filament does not review, endorse, or vet the security of plugins outside the filament/ namespace. Review the source and install at your own risk. Found malware or an unresolved security issue the author won't address? Report it .
Shuvro Roy avatar Author: Shuvro Roy

Documentation

Stature is a polished, Statamic-inspired admin theme for Filament 5. It brings compact navigation, a dark global toolbar, an inset workspace, layered cards, and carefully paired light and dark modes to content-heavy control panels.

It styles Filament's existing components instead of replacing them. The package ships as a compiled, panel-scoped stylesheet, so the consuming application does not need a custom Tailwind build, Vite entry, published Blade views, or a separate icon set.

#Screenshots

Every authenticated screenshot below comes from the Shop area of the Filament application used to test the theme. The login pair covers the authentication shell. Each surface is shown in both light and dark mode. The gallery uses hosted release copies and package-relative images. The original images remain in this package's assets directory.

#Dashboard

Shop filters, commerce KPIs, charts, compact navigation, and the inset application shell.

Light mode Dark mode
Stature Theme Shop dashboard in light mode Stature Theme Shop dashboard in dark mode

#Global search

Grouped customer and order results displayed over the Shop Orders page, with sticky category labels and a framed, scrollable results surface.

Light mode Dark mode
Stature Theme global search on the Shop Orders page in light mode Stature Theme global search on the Shop Orders page in dark mode

#Resource table

Shop order statistics, status tabs, grouping and search controls, status badges, row selection, and order data.

Light mode Dark mode
Stature Theme Shop orders table in light mode Stature Theme Shop orders table in dark mode

#Action submenu

Contextual Shop order actions with icons, disabled states, semantic colors, and a layered dropdown surface.

Light mode Dark mode
Stature Theme Shop order action submenu in light mode Stature Theme Shop order action submenu in dark mode

#Details page

A Shop order record with breadcrumbs, status controls, customer and address fields, metadata, and page actions.

Light mode Dark mode
Stature Theme Shop order record page in light mode Stature Theme Shop order record page in dark mode

#Form and fields

A Shop product form with text and date fields, a rich editor, file upload, pricing, status controls, and associations.

Light mode Dark mode
Stature Theme Shop product form in light mode Stature Theme Shop product form in dark mode

#Modal

A Shop product price-adjustment modal with a layered overlay and footer actions.

Light mode Dark mode
Stature Theme Shop product price modal in light mode Stature Theme Shop product price modal in dark mode

#Slide-over

A Shop order shipping action with a full-height surface, notes field, and sticky footer actions.

Light mode Dark mode
Stature Theme Shop order shipping slide-over in light mode Stature Theme Shop order shipping slide-over in dark mode

#User menu

The authenticated user menu presents the avatar, name, email, account actions, and Light, Dark, and System appearance controls in a compact layered dropdown.

Light mode Dark mode
Stature Theme user menu in light mode Stature Theme user menu in dark mode

#Database notification panel

Shop order, inventory, and payment notifications presented in an inset, full-height panel.

Light mode Dark mode
Stature Theme Shop database notification panel in light mode Stature Theme Shop database notification panel in dark mode

#Transient notifications

Shop inventory success and warning toasts using the same framed surface treatment.

Light mode Dark mode
Stature Theme Shop inventory notifications in light mode Stature Theme Shop inventory notifications in dark mode

#Login

Filament's authentication form inside the Stature simple-page shell.

Light mode Dark mode
Stature Theme login page in light mode Stature Theme login page in dark mode

#Highlights

  • Drop-in Filament plugin — install it, publish Filament assets, and register it on a panel.
  • No application build step — Stature includes its compiled production stylesheet.
  • Per-panel scoping — only panels that register the plugin receive the theme.
  • Complete light and dark modes — both modes use coordinated surfaces, borders, shadows, and readable state colors.
  • Statamic-inspired application shell — a persistent dark toolbar, compact sidebar, and rounded inset workspace.
  • Persistent sidebar toggle — the Statamic-style hamburger smoothly hides or restores the desktop sidebar and remembers the user's preference.
  • Consistent component treatment — tables, forms, sections, tabs, widgets, dropdowns, the user menu, modals, slide-overs, and notifications share one visual system.
  • Responsive navigation — the shell adapts to desktop and mobile panel layouts.
  • Filament-native behavior — permissions, actions, Livewire interactions, and component APIs continue to work normally.

#Requirements

Dependency Supported version
PHP ^8.2
Filament ^5.0

Use a Laravel version supported by your installed Filament 5 release.

#Purchase and package access

Stature is commercial software distributed through a private Composer repository. After purchasing a license, use the repository URL and Composer credentials provided with the order to authenticate your machine.

Keep Composer credentials in Composer's authentication configuration. Do not commit credentials or an auth.json file to your project repository.

#Installation instructions

Share these instructions with your customers to help them get started with Stature. Run each command from the Laravel application root.

#1. Configure the Composer repository

Add the private Privato Composer repository to the application:

composer config repositories.shuvroroy composer https://shuvroroy.privato.pub/composer

#2. Authenticate with Privato

Replace <EMAIL> and <KEY> with the credentials supplied after purchase:

composer config --auth http-basic.shuvroroy.privato.pub "<EMAIL>" "<KEY>"

Composer stores these credentials in auth.json. Keep that file private and do not commit it to source control.

#3. Require the package

Install Stature after configuring and authenticating the repository:

composer require shuvroroy/filament-stature-theme

#4. Publish Filament assets

php artisan filament:assets

This copies Stature's compiled stylesheet into the application's public Filament assets. The consuming application does not need to import the package CSS into Vite or Tailwind.

#5. Register the plugin

Add Stature to each panel that should use the theme:

use Filament\Panel;
use ShuvroRoy\FilamentStatureTheme\StatureThemePlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->plugin(StatureThemePlugin::make());
}

Remove viteTheme() from that panel if it was previously used to register a different Filament theme. Other panels remain unchanged unless they also register StatureThemePlugin.

#Customization

All supported design controls are fluent methods on the plugin instance:

use Filament\FontProviders\BunnyFontProvider;
use Filament\Support\Colors\Color;
use ShuvroRoy\FilamentStatureTheme\StatureThemePlugin;

->plugin(
    StatureThemePlugin::make()
        ->primaryColor(Color::Violet)
        ->grayColor(Color::Slate)
        ->sidebarWidth('14rem')
        ->sidebarToggle()
        ->font(
            'DM Sans',
            provider: BunnyFontProvider::class,
        ),
)
Setting Method Default
Primary palette primaryColor() Filament Indigo
Neutral palette grayColor() Filament Zinc
Desktop sidebar width sidebarWidth() 12rem
Desktop sidebar toggle sidebarToggle() Enabled
Panel font font() Filament's default font
Browser-native date/time controls nativeDateTimePickers() Disabled

Both color methods accept a Filament color palette or a complete custom 50950 palette array. The sidebar width accepts any valid CSS length. The desktop sidebar toggle is enabled by default; pass false to sidebarToggle(false) to keep the sidebar fixed open.

Stature uses Filament's themeable date and time picker panels by default so their light and dark appearances stay consistent across browsers. Call nativeDateTimePickers() to use browser-native controls instead. An individual field can still opt in with Filament's native() method.

Brand logo

The global toolbar stays dark in both color modes. Use a light or high-contrast brand mark so it remains legible:

return $panel
    ->brandLogo(asset('images/logo-light.svg'))
    ->darkModeBrandLogo(asset('images/logo-light.svg'));

#Dark mode

No additional configuration is needed. Stature follows Filament's built-in theme preference and theme switcher.

#Styled surfaces

Stature provides coordinated styling for:

  • Topbar, sidebar, navigation groups, badges, and mobile navigation
  • Dashboard stats, charts, widgets, sections, and contained tabs
  • Tables, filters, column controls, pagination, bulk actions, and empty states
  • Form fields, checkboxes, toggle buttons, repeaters, and action footers
  • Buttons, action menus, dropdowns, badges, and loading states
  • Modals, slide-overs, database notifications, and transient notifications
  • Login and other Filament authentication screens

The theme uses Filament's own markup and icons. There are no publishable views or SVG overrides to keep synchronized with Filament releases.

#Updating

Republish assets whenever the package is updated:

composer update shuvroroy/filament-stature-theme
php artisan filament:assets

If the browser still shows an older stylesheet, clear Laravel's caches and refresh the browser cache:

php artisan optimize:clear

#Troubleshooting

#The panel still uses its previous theme

Confirm that StatureThemePlugin::make() is registered on that panel, remove any conflicting viteTheme() call, and run php artisan filament:assets.

#Changes are missing after an update

Run php artisan filament:assets again, then clear the application and browser caches.

#The logo has poor contrast

The desktop toolbar is intentionally dark in both modes. Supply a light or high-contrast logo through the panel's standard branding methods.

#Frequently asked questions

#Does Stature require Tailwind or Vite in my application?

No. The package registers its pre-built stylesheet through Filament's asset manager.

#Can I enable it on only one panel?

Yes. Stature is scoped to the panels where the plugin is registered.

#Can I change the primary and neutral colors?

Yes. Use primaryColor() and grayColor() with Filament palettes or complete custom palette arrays.

#Does it support both light and dark mode?

Yes. Both palettes are included and follow Filament's current theme setting.

#Does the package publish Blade views or SVG files?

No. Stature styles Filament's existing markup and icon system, which keeps the package small and reduces upgrade maintenance.

#Package development

This section is for maintainers working on Stature itself. Customers do not need Node.js or these commands.

composer install
npm ci
npm run dev

Before releasing a new version, rebuild and validate the distributable assets:

npm run format:check
npm run build
composer test
composer test:lint
composer analyse

Commit both the source files in resources/css/ and the compiled resources/dist/stature.css file.

#License

Stature is proprietary commercial software. A valid license is required for each use permitted by the terms supplied at purchase. See LICENSE.md for the repository notice.

#Support

Use the support channel supplied with your purchase, or email shuvro.nsu.cse@gmail.com.