Download the PHP package jeffersongoncalves/filament-flux without Composer

Filament Flux

Filament v5 plugin exposing Livewire Flux UI components as native Form Fields, Table Columns, Infolist Entries, and Actions.

Filament v5 only. Single 1.x branch tracks Filament v5. No backports to v3/v4.

Compatibility

Installation

filament-flux:install patches resources/css/filament/{panel}/theme.css idempotently:

Tailwind v4 picks up Flux + this package's view scanning automatically.

Register the plugin

Plugin options

The plugin also installs a JavaScript bridge between Filament's theme switcher and Flux's appearance store, so toggling theme in either system stays in sync (including cross-tab via storage events).

Use Flux everywhere (auto-replace Filament Form Fields)

Existing Resources keep calling TextInput::make(), Select::make(), etc. — they receive the matching Flux subclass automatically. No code changes in your Resources.

Granular opt-out per field:

Available slugs (all default to true when useEverywhere() is called):

Each Flux subclass extends the matching Filament native, so every method it exposes — autocomplete(), mask(), revealable(), length(), searchable(), relationship(), etc. — keeps working. Only the rendered markup changes.

Use Flux navigation (sidebar + topbar)

Replace Filament's sidebar and topbar items with <flux:navlist.item> / <flux:navlist.group> and <flux:navbar.item> markup, while keeping Filament's data layer (active state, badges, child items, registered Resources/Pages/custom items) intact.

Granular per-area opt-out:

The plugin prepends per-area hint paths to the filament-panels view namespace; missing files fall back to the vendor copies, so upgrading Filament minors stays safe as long as the overridden views (sidebar item, sidebar group, topbar item, layout index, livewire sidebar) still match the prop signatures of the active Filament minor.

Full panel shell (shell toggle)

Off by default — the shell slug rewrites the panel's outer <aside> shell into <flux:sidebar> and wraps the main content in <flux:main>, including the sidebar Livewire view. Header, logo, tenant menu, global search, render hooks and footer behaviors are all preserved.

This is the most invasive override — opt in only after you've confirmed your panel's render hooks and customizations still render correctly. The Filament version that ships with each filament-flux release is the one that's been verified.

Theme switcher (themeSwitcher toggle)

Off by default. Replaces the three-button theme switcher (light / dark / system) with a single <flux:dropdown> carrying a <flux:menu> of the three modes. Filament's theme-changed event is dispatched on selection, so the existing dark mode listener and the bridge into flux.appearance (Phase 1) keep working unchanged.

Use Flux Blade components (useFluxComponents())

Replace Filament's atomic <x-filament::*> Blade components with <x-flux::*>. Each slug is opt-in.

Available slugs:

The plugin prepends per-slug hint paths to the filament, filament-schemas (for schemaText), filament-widgets (for statsCard) and filament-notifications (for notifications) view namespaces; missing files fall back to vendor copies. Feature complexity (delete buttons on badges, key bindings, loading indicators, deferred badges, form-tag dropdown items, secondary/divided/aside section variants) doesn't fully map to Flux primitives — disable a slug if you rely on the Filament-only affordances.

Mixed icon sets (Heroicons + Font Awesome / Tabler / Lucide / etc.)

Filament users frequently register icons from non-heroicon Blade Icons sets. The bundled HeroiconNormalizer detects known prefixes (fontawesome-, tabler-, lucide-, phosphor-, mdi-, octicon-, bi-, feather-, simple-icons-, eos-icons-, bxl-, bxs-, bx-, gmdi-, css-gg-, fa[brs]?-) and falls back to \Filament\Support\generate_icon_html() so those icons keep rendering through Blade Icons. Bare names (no prefix) and heroicon-{o,s,m,c,mini,micro,outline,solid}-* are routed through <flux:icon> with the correct variant.

Notifications and user menu

Filament's notifications system and user-menu use deep DSL surfaces that don't map cleanly onto Flux primitives. The recommended path:

• For Flux-style toasts in Custom Pages, use Jeffersongoncalves\FilamentFlux\Components\FluxToast to dispatch toast-show Livewire events. Pair with <x-flux::toast.group> in your panel layout's body.start render hook.
• The Filament user-menu remains the most flexible affordance for tenant menus, profile links, and dynamic items. Keep it as-is.

Form Fields

Actions

Note on modals: Action confirmation/forms reuse Filament's native modal system (consistent with the rest of the panel). <flux:modal> is not available in Flux free; use Filament modals or roll your own with Alpine in Custom Pages.

Table Columns

Infolist Entries

Color resolver

fluxColor() accepts three forms:

Valid Flux colors: zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.

FluxIcon helper

OTP input

Link Action / Column / Entry

Schema components

Drop-in for forms and infolists.

Modal helper for Custom Pages

Programmatic open/close from Livewire:

Action confirmation modals reuse Filament's native modal system (->requiresConfirmation()). Use <flux:modal> only in Custom Pages where you control the markup directly.

Toast notifications

Breadcrumbs and pagination

Custom Pages — direct Blade usage

Components that don't have a Filament wrapper (page-level layout, not Form/Schema primitives) are still available via Flux's anonymous Blade components in any Custom Page:

<x-flux::accent>, <x-flux::aside>, <x-flux::brand>, <x-flux::container>, <x-flux::main>, <x-flux::header>, <x-flux::footer>, <x-flux::navbar>, <x-flux::navlist>, <x-flux::navmenu>, <x-flux::sidebar>, <x-flux::profile>, <x-flux::label>, <x-flux::legend>, <x-flux::error>, <x-flux::field>, <x-flux::description>, <x-flux::link>, <x-flux::heading>, <x-flux::subheading>, <x-flux::text>, <x-flux::tooltip>, <x-flux::with-field>, <x-flux::with-tooltip>.

Theme bridge

dist/filament-flux.css maps Filament's design tokens (--fi-color-primary-*, --fi-color-gray-*) to Flux's tokens (--color-accent, --color-zinc-*) inside .filament-flux-scope. Disable the wrapper to keep Flux's native zinc palette:

Troubleshooting

Components render unstyled (look like raw HTML). Tailwind v4 isn't scanning Flux's source. Re-run php artisan filament-flux:install --panel=admin and npm run build. Confirm the two @import lines are present in resources/css/filament/{panel}/theme.css.

Theme toggle doesn't propagate to Flux components. The plugin injects a bridge script. If you disabled injectAppearance(false), you also disabled the bridge. Re-enable it or wire your own listener for theme-changed.

auth.json warning during install. Only relevant for filament-flux-pro (sister package). Ignore for filament-flux.

Validation error appears twice. Filament's wrapper renders the error message; the Flux component renders a red border via :invalid. They are not duplicates — the border is visual only.

Testing

Credits

• Jefferson Gonçalves

License

The MIT License (MIT). See License File.