Search by

saivra / meui-theme

GMustafa-s

A native light and dark application theme for Filament 5.

Package info

github.com/Saivra/meui-theme

Homepage

Issues

pkg:composer/saivra/meui-theme

Statistics

Installs: 38

Dependents: 0

Suggesters: 0

Stars: 0

v0.2.0 2026-10-24 11:40 UTC

This package is auto-updated.

Last update: 2026-10-25 02:16:16 UTC


README

A polished workspace for Filament 5, with refined light and dark surfaces, full-height navigation, an inset content area and personal appearance controls. Free and open source under the MIT license.

Tests Packagist License: MIT

MeUI light and dark marketing preview

The hero is an illustrated marketing preview. The authentication, studio and customizer screens below are real captures of the working plugin. MeUI is an independent community theme by Saivra Technologies, shown in a local copy of the official Filament demo with seeded demonstration data.

Designed across the application

  • A coherent shell. Navigation, tenant switching, global search, notifications and profile actions.
  • Light and dark appearance. Consistent tables, forms, records, dialogs, notices and chart containers.
  • Personal customization. Live preview and database-backed preferences for signed-in users, enabled and controlled by the panel provider.
  • Your application's identity. Native logos, fonts, primary colors, guards, tenancy, MFA and permissions.
  • A working component studio. Explore native controls, validation, records, dialogs and banner rails.
  • A small integration. Filament, Livewire and ordinary CSS, with no additional JavaScript framework, tracking or license service.

Install

composer require saivra/meui-theme
php artisan filament:assets

Register the plugin in each panel you want to theme:

use Saivra\MeUi\MeUiPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        // Your existing panel configuration...
        ->plugin(MeUiPlugin::make());
}

Laravel discovers the service provider automatically. A standard Filament panel needs no Node build. For an existing Vite theme, follow the custom-theme setup. Run filament:assets after package upgrades and during deployment.

Make the workspace yours

The optional customizer lets signed-in users preview and save their own neutral palette, accent, corners, density, card treatment, navigation surface, workspace layout and contrast. Changes apply immediately after saving and survive a reload. Reset restores the panel provider's current defaults.

Personal appearance — light Personal appearance — dark
MeUI personal customizer in light mode MeUI personal customizer in dark mode

Publish the optional preferences migration before enabling the page:

php artisan vendor:publish --tag=meui-migrations
php artisan migrate
MeUiPlugin::make()->customizer();

This adds Customize theme to the profile menu for every signed-in user. Preferences are isolated by panel, guard and user. The theme and studio need no migration when personal customization is disabled.

Developers choose the defaults, audience and available controls in the panel provider:

MeUiPlugin::make()
    ->palette('slate')
    ->accent('panel')
    ->radius('rounded')
    ->surface('elevated')
    ->sidebarStyle('soft')
    ->workspace('inset')
    ->density('comfortable')
    ->contrast('standard')
    ->customizer()
    ->customizerOptions(['palette', 'radius', 'density', 'contrast']);

Options also accept request-time closures for application settings. Restrict access with customizer(authorize: fn (): bool => auth()->user()?->can('customizeTheme') ?? false) after defining the ability in your application. You can connect an existing database settings store through preferences(load: ..., save: ...). See the customization guide and mobile preview.

A polished first impression

The split authentication layout accompanies native Filament sign-in, registration, recovery, verification and MFA pages. Authentication, validation and access rules remain in your application.

Sign in — light Sign in — dark
Native Filament sign-in with MeUI in light mode Native Filament sign-in with MeUI in dark mode
Registration Account recovery
Native registration with MeUI Native password recovery with MeUI

Use authAside(false) for a panel with an existing custom authentication layout.

MeUI Studio

The studio is an interactive reference for the components that make up a complete application: searchable tables, filters, native form tabs and validation, record details, dialogs, empty states, appearance controls and application notices. All studio data is fictitious.

Data workspace Native forms
MeUI Studio data workspace MeUI Studio forms in dark mode
Notice components Focused dialogs
MeUI Studio semantic banners MeUI Studio native dialog

The studio is disabled by default. Enable it for an intended audience with an authorization closure:

MeUiPlugin::make()->gallery(
    fn (): bool => auth()->user()?->can('viewComponentStudio') ?? false,
);

Define the ability in your application. Entry and interactive actions require authentication and a successful authorization check. The studio does not query or save your application's business records.

Native components, consistently styled

Use your existing Filament resources, forms, tables, infolists, actions and notifications. MeUI styles their surfaces and states while preserving Filament's behavior. This includes rich editors, uploads, repeaters, builders, wizards, relation managers, modal forms and slide-overs.

Wizard Product editing
Native order wizard with MeUI Product editing with MeUI

Dedicated notice rails and five semantic banner tones support application messages. The package also includes page-intro, frame and empty-state Blade components. See components and notices.

Requirements and integration

Dependency Supported versions
PHP 8.2+ on Laravel 12; 8.3+ on Laravel 13
Laravel 12 and 13
Filament 5.10.2 or later within 5.x
Browser Current Chrome, Edge, Firefox or Safari with modern CSS support

The compatibility matrix tests Laravel 12 and 13, minimum and current Filament versions, and SQLite and PostgreSQL.

Keep your panel's original shell with shell(false). Branding, colors, fonts, guards, tenancy and permissions stay configured through Filament. MeUI includes visible focus treatments, mobile control sizing, semantic notices, reduced-motion and forced-colors styles. Check your completed application with its content, colors and additional plugins; see tested scope.

Documentation and support

Guide Contents
Installation Setup, Vite themes, deployment, upgrades and troubleshooting.
Customization Panel defaults, personal controls, database storage, access and integration callbacks.
Components Notice rails, Blade helpers and the component studio.
Gallery Authentication, customization and application screens.
Compatibility Supported versions, test scope and integration limits.

Open a GitHub issue with your versions, browser and a small reproduction. Use private security reporting for vulnerabilities. Development instructions are in CONTRIBUTING.md.

MeUI is in the 0.x series. Minor releases may change public APIs; patch releases are intended for compatible fixes. Review the changelog before upgrading.

Original demo, illustrated comparisons and launch artwork

The illustrated previews explore an enhanced visual direction, including an ApexCharts-style chart composition. The theme uses the application's chart components and does not install or replace a chart library.

Light mode illustrated comparison

Dark mode illustrated comparison

Original Filament demo MeUI applied, initial release
Original Filament demo, light Initial MeUI demo, light
Original Filament demo, dark Initial MeUI demo, dark

Orders marketing preview

Directory thumbnail

Main image: 2560×1440 JPEG · Thumbnail: 1280×720 JPEG

Created and maintained by Ghulam Mustafa at Saivra Technologies. Released under the MIT license.