jeffersongoncalves/filament-flux
Filament v5 plugin that exposes Livewire Flux UI components as native Filament Form fields, Table columns, Infolist entries, and Actions. Includes an installer to patch panel theme CSS and add Flux + Filament Flux styles.
transition declaration on [data-flux-button] to remove the 75 ms lag the icon-button override was inheriting from .fi-icon-btn, but Filament's native .fi-btn (every labeled action, dropdown item, widget button, etc.) keeps its own transition rule that animates background-color / color for up to 150 ms (the Tailwind v4 default kicks in when duration-75 doesn't make it into the compiled stylesheet). The plugin now ships a tiny MutationObserver in the body-end asset injector that watches <html> for class changes (Filament's theme switcher adds/removes dark there) and, on every flip, inserts a one-frame * { transition: none !important; animation-duration: 0s !important; } style block, then strips it on the following animation frame so hover / focus transitions resume normally for subsequent interactions. The new accent paints in the same frame as the class flip on every button on the page, regardless of how Tailwind compiled the underlying utilities.Two side-by-side buttons on <x-filament::button labeled-from="..."> actions (the panel account-widget Sign-out, dashboard sign-out widgets, etc.). Filament's <x-filament::button :labeled-from="sm"> renders two siblings — an <x-filament::icon-button> followed by <button class="fi-btn fi-labeled-from-sm"> — and relies on .fi-btn.fi-labeled-from-{bp} (hidden / {bp}:inline-grid) plus .fi-icon-btn:has(+ .fi-btn.fi-labeled-from-{bp}) ({bp}:hidden) to keep only one visible per viewport. In Tailwind v4 builds where neither selector reaches the compiled stylesheet (Filament Boost defaults, custom theme.css starting fresh, missing [@source](https://github.com/source)s), both buttons render at once. The plugin stylesheet now expresses both halves directly for every breakpoint (sm, md, lg, xl, 2xl), with !important on the icon-only side so it wins the cascade.
Visible color "lag" on every Flux button when the theme switches. Re-applying .fi-icon-btn to the icon-button override (1.9.6) inherits Filament's transition duration-75, which animates the var(--color-accent) swap over 75 ms whenever Filament's theme switcher flips the .dark class. Cancel the transition on [data-flux-button] (and the same element when it also carries .fi-icon-btn / .fi-btn) so the new color paints in the same frame as the class flip — hover/focus styles still apply instantly.
<flux:button> template always renders a loading-indicator overlay (<div data-flux-loading-indicator class="absolute inset-0 ... opacity-0">) that's meant to fade in only during a loading state. The fade depends on the opacity-0 utility being present in the compiled stylesheet, which only happens when the consumer's theme.css [@source](https://github.com/source)s vendor/livewire/flux/stubs/.... Many panels stop at the Tailwind + Filament Boost defaults so opacity-0 is purged and the spinner SVG ends up rendered at full opacity on top of the real icon, showing two stacked icons inside the same button (the user-account widget Sign-out button is the most visible offender). Plugin CSS now expresses the spinner-show / icon-hide rule directly via the data attributes Flux already toggles (data-loading, data-flux-loading, and the submit-style [disabled]), so the overlay stays hidden by default regardless of how Tailwind picked up the utilities, and only fades in when the button is actually loading.fi-topbar-open-sidebar-btn on >=lg to win over Flux's inline-flex cascade, which removed the only expand affordance left for panels using fullyCollapsibleOnDesktop() — the desktop chevron container is gated by Filament's x-show="$store.sidebar.isOpen || $isSidebarCollapsibleOnDesktop", which evaluates false for fully-collapsible-only panels once the sidebar is closed (and the open-collapse chevron isn't even rendered without collapsibleOnDesktop). The plugin now uses .fi-body-scoped selectors (specificity 0,2,0) instead of !important, hides fi-topbar-close-sidebar-btn on >=lg unconditionally, but only hides fi-topbar-open-sidebar-btn on >=lg when the panel has fi-body-has-sidebar-collapsible-on-desktop without fi-body-has-sidebar-fully-collapsible-on-desktop — so fullyCollapsibleOnDesktop() panels keep the mobile-style hamburger as their desktop expand affordance.labeledFrom() actions rendered the icon-only and labeled twin at the same time. The icon-button override stopped emitting the fi-icon-btn class that Filament's <x-filament::icon-button> template adds, so Filament's .fi-icon-btn:has(+ .fi-btn.fi-labeled-from-{breakpoint}) selector no longer hid the icon-only twin next to a labeled action and panels showed both buttons. The override now re-adds fi-icon-btn to the flux:button class list so the upstream de-duplication kicks in again.x-show="$store.sidebar.isOpen || $isSidebarCollapsibleOnDesktop". Panels using fullyCollapsibleOnDesktop() (mapped to Flux compact mode in 1.9.3) evaluate the second flag as false, so once the sidebar collapsed Alpine inlined display: none on the container and the user lost the only way to expand it again — the mobile-style open button has been force-hidden at >=lg since 1.9.4. Plugin CSS now forces display: flex !important on .fi-topbar-collapse-sidebar-btn-ctn at >=lg, so the inner open/close chevrons — each still guarded by its own x-show — stay reachable regardless of the panel's collapsibility flavor.section slug — ParseError on every page that uses Filament Sections. The override rendered <x-flux::card> with inline [@if](https://github.com/if) ($persistCollapsed) ... [@else](https://github.com/else) ... [@endif](https://github.com/endif) Blade directives sitting inside the x-data attribute value. Filament's upstream <section> element tolerates that because Blade's HTML parser compiles directives inside attribute strings, but Blade's anonymous-component parser leaves them as literal text — the leaked [@endif](https://github.com/endif) then surfaces as syntax error, unexpected token "endif", expecting end of file. The Alpine payload (and every collapsible event handler) is now pre-built into a ComponentAttributeBag and passed to <x-flux::card> via :attributes, so the component tag only ever sees plain attribute strings.lg:hidden rule on fi-topbar-close-sidebar-btn is a single-class selector with the same specificity as Flux's inline-flex utility on <flux:button>, so a source-order race could leave both the mobile X and the desktop chevron visible at >=lg. Plugin CSS now forces display: none !important on the mobile open/close pair at >=lg and on the desktop collapse pair (and its container) at <lg, so the cascade stops mattering.fullyCollapsibleOnDesktop() and useFluxNavigation(['shell' => true]) was on, the sidebar slid entirely off-screen instead of compacting to icons, and the topbar rendered both fi-topbar-open-sidebar-btn and fi-topbar-close-collapse-sidebar-btn at once. Shell now maps either Filament collapsibility intent (collapsibleOnDesktop and fullyCollapsibleOnDesktop) to Flux's compact mode: <flux:sidebar> opens with collapsible="true" so Flux owns desktop + mobile toggling, and the layout adds the fi-body-has-sidebar-collapsible-on-desktop body class whenever any collapse mode is active so Filament's upstream sidebar/topbar CSS stays aligned with the visual we ship..fi-modal-close-btn pins to the trailing edge via position: absolute; inset-inline-end; Flux's <flux:button> injects a relative class with utility-layer specificity that, depending on stylesheet order, can win and leave the X stuck inside the header's flex flow on the leading edge. Plugin CSS now re-asserts position: absolute !important, inset-block-start, and inset-inline-end for both standard and slide-over modals so the X stays on the trailing edge regardless of source order..fi-sidebar-nav-groups ships with gap-y-7 to space top-level groups; inside <flux:navlist> that gap stacked on top of the navlist's own rhythm and rendered as visible holes between sibling items. Plugin CSS now forces gap: 0 on .fi-sidebar-nav-groups so the Flux navlist owns the spacing.useFluxNavigation(['shell' => true]) override was on, Filament's topbar fi-topbar-open-sidebar-btn (and its close/collapse twins) drove $store.sidebar while the rendered sidebar was a Flux <ui-sidebar> — so clicking the menu icon did nothing visually. Plugin now ships a small bridge that subscribes to the Filament Alpine store via effect(), dispatches Flux's documented flux-sidebar-toggle event whenever store and element disagree, and mirrors the inverse direction with a MutationObserver on the data-flux-sidebar-collapsed-{mobile,desktop} attributes (so backdrop clicks and <ui-sidebar-toggle> elements update the Filament store too). Reattaches on livewire:navigated. No-ops when <ui-sidebar> is absent.Phase H5 — statsCard Blade override. New slug for useFluxComponents() swaps the <x-filament-widgets::stats-overview-widget.stat> view for a Flux-native implementation:
<flux:card> wraps the stat,<flux:subheading> carries the leading icon + label,<flux:heading size="xl"> renders the value,<flux:text> renders the description (color + before/after icon position preserved).URL anchor (<a> vs <div>), Filament polling attribute, the Alpine chart canvas (x-load/x-data="statsOverviewStatChart(...)"), and every fi-wi-stats-overview-stat* BEM class are kept so existing CSS keeps working alongside the Flux skin.
FilamentFluxPlugin::make()->useFluxComponents([
'statsCard' => true,
]);
Disable the slug if you depend on Filament-only stat affordances (array-tuple description colors, custom view per stat, etc.).
Heroicon backed-enum values (o-bars-3, s-cog, m-trash, c-bell, plus mini-/micro-/outline-/solid- long forms). Previously these bare prefixes leaked into <flux:icon> and threw Flux component [icon.o-bars-3] does not exist from sidebar/topbar/icon-button overrides.HeroiconNormalizer::variant() resolves the Flux variant from the same prefixes so heroicons render with the correct stroke/fill style.A new opt-in slug that targets a different Filament subpackage namespace, plus a normalizer that bridges Filament's Blade Icons naming with Flux's heroicon-only component registry.
FilamentFluxPlugin::make()->useFluxComponents([
'schemaText' => true,
]);
| Slug | Filament view | Flux replacement |
|---|---|---|
schemaText |
filament-schemas::components.text |
<flux:text> (badge variant still delegates to <x-filament::badge>) |
This is the first slug to target the filament-schemas view namespace; previous slugs touched filament.
HeroiconNormalizer — mixed icon setsFilament users frequently register icons from non-heroicon Blade Icons sets. The bundled normalizer detects known prefixes and routes accordingly:
heroicon-{o,s,m,c,mini,micro,outline,solid}-* → bare name + Flux variantfontawesome-, tabler-, lucide-, phosphor-, mdi-, octicon-, bi-, feather-, simple-icons-, eos-icons-, bxl-, bxs-, bx-, gmdi-, css-gg-, fab-/far-/fas- → fall back to \Filament\Support\generate_icon_html()Sidebar and topbar item overrides, the icon override, and the iconButton override all route through it. Non-heroicon icons are pre-rendered via Filament's Blade Icons helper and handed to <flux:navlist.item> / <flux:navbar.item> as HtmlString, so registered Font Awesome / Tabler / Lucide icons keep rendering inside the Flux navigation.
Resolves Flux component [icon.heroicon-o-document-text] does not exist when Filament registered icons used the heroicon-{variant}-* Blade Icons convention.
| Filament | Laravel | PHP | Livewire | Flux |
|---|---|---|---|---|
| ^5.0 | ^11 / ^12 / ^13 | ^8.2 | ^4.0 | ^2.14 |
Drop-in. The schemaText slug ships off by default. The HeroiconNormalizer auto-applies inside existing overrides — no API changes required.
1.9.0 — Phase H5: stats overview widget1.10.0 — Phase H6: notifications envelopeThree new opt-in slugs for useFluxComponents():
FilamentFluxPlugin::make()->useFluxComponents([
'dropdownHeader' => true,
'modalHeading' => true,
'modalDescription' => true,
]);
| Slug | Filament view | Flux replacement |
|---|---|---|
dropdownHeader |
filament::components.dropdown.header |
<flux:heading size="sm"> with optional leading icon |
modalHeading |
filament::components.modal.heading |
<flux:heading size="lg"> (envelope, events and Action machinery stay on Filament) |
modalDescription |
filament::components.modal.description |
<flux:text> |
<x-filament::modal> is wired into:
filamentModal Alpine state (isOpen, isTopmost, autofocus, slideOver)open-modal / close-modal / close-modal-quietly event protocol with IDs->requiresConfirmation() dispatches those events)<x-filament-actions::modals> teleport wrapperReplacing it with <flux:modal> (different event protocol and state model) would break Action confirmation flows everywhere. The lighter typography swaps in this release land most of the visual benefit without breaking Action modals.
Resolves a Object of class BladeUI\Icons\Svg could not be converted to string error in the icon and iconButton overrides. generate_icon_html() returns ?Htmlable; the views now go through ->toHtml() before emitting the SVG instead of relying on __toString().
| Filament | Laravel | PHP | Livewire | Flux |
|---|---|---|---|---|
| ^5.0 | ^11 / ^12 / ^13 | ^8.2 | ^4.0 | ^2.14 |
Drop-in. New slugs ship off by default — existing useFluxComponents() calls keep their previous behavior. The icon/iconButton SVG fix is backward compatible.
1.8.0 — Phase H4: schema text/list overrides1.9.0 — Phase H5: stats overview widget1.10.0 — Phase H6: notifications envelopeschemaText override — fixes UnhandledMatchError: Unhandled match case 'gray' raised by vendor/livewire/flux/stubs/resources/views/flux/text.blade.php when Filament passed gray/primary/success/etc. into <x-flux::text>.Full Changelog: https://github.com/jeffersongoncalves/filament-flux/compare/1.11.0...1.11.1
pagination Blade override. New slug for useFluxComponents() swaps <x-filament::pagination> for <flux:pagination :paginator="$paginator"> while keeping the fi-pagination BEM class on the wrapper so existing CSS hooks remain.
<flux:pagination> covers length-aware paginators with full page-number rendering, RTL-aware chevrons, and disabled-state styling.pageOptions per-page dropdown, no extremeLinks jump-to-first / jump-to-last buttons, and no cursor-paginator special-cased buttons. Disable the slug if you rely on any of those — the upstream Filament view falls back automatically.FilamentFluxPlugin::make()->useFluxComponents([
'pagination' => true,
]);
notifications Blade override. New slug for useFluxComponents() swaps the filament-notifications::notifications Livewire view envelope for a Flux-native toast group:
<div class="fi-no fi-align-{...}"> is replaced by <x-flux::toast.group position="...">,Notification Livewire object keeps rendering its own Filament-styled markup inside the group,alignment (Start | Center | End) + verticalAlignment (Start | Center | End) map to Flux's "vertical horizontal" position pair (vertical Start → top, otherwise bottom; horizontal Start → start, Center → center, otherwise → end),EchoLoaded script and the fi-no fi-align-* BEM classes are preserved so existing CSS and the Echo wiring keep working alongside the Flux skin.FilamentFluxPlugin::make()->useFluxComponents([
'notifications' => true,
]);
Disable the slug if you depend on the original Filament tray markup (custom CSS keyed off the wrapper element, third-party panels intercepting the inner <div> with their own JS, etc.).
Five new opt-in slugs for useFluxComponents():
FilamentFluxPlugin::make()->useFluxComponents([
'callout' => true,
'card' => true,
'fieldset' => true,
'section' => true,
'dropdown' => true,
]);
| Slug | Filament view(s) | Flux replacement |
|---|---|---|
callout |
filament::components.callout |
<flux:callout> + <flux:callout.text> (variant from color) |
card |
filament::components.card |
<flux:card> |
fieldset |
filament::components.fieldset |
<flux:fieldset> + <flux:legend> |
section |
filament::components.section.index |
<flux:card> with header via <flux:heading> + <flux:text>; collapsible/persist Alpine state preserved |
dropdown |
dropdown + dropdown.list + dropdown.list.item |
<flux:dropdown> + <flux:menu> + <flux:menu.item> |
Filament placement is mapped to flux position + align. Form-tag dropdown items (CSRF + POST submit) fall back to Filament's native markup automatically.
The icon and iconButton overrides now normalize a string iconSize into a Filament\Support\Enums\IconSize enum before delegating to generate_icon_html(). Resolves a TypeError when third-party packages pass icon sizes as plain strings.
| Filament | Laravel | PHP | Livewire | Flux |
|---|---|---|---|---|
| ^5.0 | ^11 / ^12 / ^13 | ^8.2 | ^4.0 | ^2.14 |
Drop-in. New slugs ship off by default — existing useFluxComponents() calls keep their previous behavior. The icon/iconButton size fix is backward compatible.
1.7.0 — Phase H3: action modal envelope + filament-actions:group1.8.0 — Phase H4: schema text/list overrides1.9.0 — Phase H5: stats overview widgetuseFluxComponents() — Filament Blade component overrides (Phase H1)A new opt-in API alongside useEverywhere() and useFluxNavigation(). Six atomic <x-filament::*> Blade components are now swappable for <x-flux::*> markup at runtime via View::prependNamespace.
FilamentFluxPlugin::make()->useFluxComponents();
// granular:
FilamentFluxPlugin::make()->useFluxComponents([
'badge' => true,
'avatar' => true,
'icon' => true,
'iconButton' => false, // keep Filament for icon buttons with key bindings
'link' => true,
'breadcrumbs' => true,
]);
| Slug | Filament view | Flux replacement |
|---|---|---|
badge |
filament::components.badge |
<flux:badge> (color map: primary → blue, success → lime, warning → amber, danger → red, info → cyan, gray → zinc) |
avatar |
filament::components.avatar |
<flux:avatar> |
icon |
filament::components.icon |
<flux:icon> (falls back to native HTML for non-string icons) |
iconButton |
filament::components.icon-button |
<flux:button square icon> |
link |
filament::components.link |
<flux:link> |
breadcrumbs |
filament::components.breadcrumbs |
<flux:breadcrumbs> + <flux:breadcrumbs.item> |
Filament-specific affordances (delete buttons on badges, key bindings, loading indicators) don't fully map to Flux primitives — disable a slug if you rely on them.
pagination slug deferredFilament's pagination handles cursor paginators and per-page selectors that <flux:pagination> doesn't cover in the free tier. Will land in a later H2 release alongside the schema/widget overrides.
FluxCheckbox and FluxSwitch views now honor Filament's isInline() flag and emit the inner control inside the <x-slot name="labelPrefix"> slot when inline is true. Restores horizontal layout (label beside control instead of below).
| Filament | Laravel | PHP | Livewire | Flux |
|---|---|---|---|---|
| ^5.0 | ^11 / ^12 / ^13 | ^8.2 | ^4.0 | ^2.14 |
Drop-in. useFluxComponents() is a new feature — existing useEverywhere() and useFluxNavigation() calls keep their previous behavior.
useFluxNavigation(['themeSwitcher' => true]) — Flux theme dropdownOff by default. When opted in, Filament's three-button theme switcher (<x-filament-panels::theme-switcher>) is replaced by a single <flux:dropdown> carrying a <flux:menu> of light / dark / system.
FilamentFluxPlugin::make()->useFluxNavigation([
'themeSwitcher' => true,
]);
The trigger reflects the current selection. Filament's theme-changed event is dispatched on selection, so the existing dark-mode Alpine store listener and the Phase 1 bridge into flux.appearance keep working unchanged.
Filament's notifications system and full user menu use deep DSL surfaces (Notification objects with broadcast channels, sortable Action items, profile slots, embedded theme switcher) that don't map cleanly onto Flux primitives. The recommended path:
FluxToast::dispatchArgs() to dispatch toast-show Livewire events.| Filament | Laravel | PHP | Livewire | Flux |
|---|---|---|---|---|
| ^5.0 | ^11 / ^12 / ^13 | ^8.2 | ^4.0 | ^2.14 |
Drop-in. The new slug ships off by default — existing useFluxNavigation() calls keep their previous behavior.
This release closes the auto-replacement plan (Fase G3). Future minors will track Filament v5.x view changes and add Pro-only Flux components when filament-flux-pro lands.
useFluxNavigation(['shell' => true]) — full Flux panel shellOff by default. When the new shell slug is opted in, the plugin replaces two more Filament views to render the panel's structural shell with Flux primitives:
filament-panels::livewire.sidebar — the panel's <aside class="fi-sidebar"> becomes <flux:sidebar collapsible sticky> with <flux:sidebar.header>, <flux:navlist> and <flux:spacer> wrappers. Tenant menu, global search, render hooks and the user/notifications footer are preserved.filament-panels::components.layout.index — the inner <main> element becomes <x-flux::main>. Render hooks (CONTENT_*, FOOTER, LAYOUT_*) keep firing in the same positions.FilamentFluxPlugin::make()->useFluxNavigation([
'sidebar' => true, // sidebar item/group → flux:navlist (already in 1.2.0)
'topbar' => true, // topbar item → flux:navbar.item (already in 1.2.0)
'shell' => true, // NEW: panel shell → flux:sidebar + flux:main
]);
The default useFluxNavigation() call (no args) still ships with shell => false so panels can adopt the lighter sidebar/topbar item overrides without touching the structural shell.
| Filament | Laravel | PHP | Livewire | Flux |
|---|---|---|---|---|
| ^5.0 | ^11 / ^12 / ^13 | ^8.2 | ^4.0 | ^2.14 |
Drop-in. Existing useFluxNavigation() calls keep the same behavior because shell defaults to false.
1.4.0 — Fase G3: replace Filament notifications with <flux:toast>, opt-in modal/theme switcher overrides.useFluxNavigation() — replace Filament's sidebar and topbar items with FluxSidebar groups and items render as <flux:navlist.group> / <flux:navlist.item>. Topbar items render as <flux:navbar.item>. Filament's data layer (active state, badges, child items, Resource/Page registration, navigation groups) is preserved verbatim — only the markup changes.
FilamentFluxPlugin::make()->useFluxNavigation();
Granular per-area opt-out:
FilamentFluxPlugin::make()->useFluxNavigation([
'sidebar' => true,
'topbar' => false, // keep Filament's topbar items as-is
]);
Each area lives in its own subdirectory under resources/views/panels-overrides/{sidebar,topbar}. The toggle prepends the relevant directories to the filament-panels view namespace via View::prependNamespace.
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) match the prop signatures of the active Filament minor.
| Filament | Laravel | PHP | Livewire | Flux |
|---|---|---|---|---|
| ^5.0 | ^11 / ^12 / ^13 | ^8.2 | ^4.0 | ^2.14 |
Drop-in. No breaking changes. The new feature is fully opt-in via useFluxNavigation().
useEverywhere() — auto-replace Filament Form Fields with FluxExisting Resources keep calling TextInput::make(), Select::make(), etc. — they receive the matching Flux subclass automatically. No code changes inside Resources.
FilamentFluxPlugin::make()->useEverywhere();
Granular per-field opt-out:
FilamentFluxPlugin::make()->useEverywhere([
'select' => false, // keep Filament's <select> with client-side searchable, etc.
'otp' => false,
]);
Eight bindings registered when enabled:
| Slug | Filament class | Flux replacement |
|---|---|---|
input |
TextInput |
FluxInput |
textarea |
Textarea |
FluxTextarea |
select |
Select |
FluxSelect |
checkbox |
Checkbox |
FluxCheckbox |
checkboxList |
CheckboxList |
FluxCheckboxGroup |
radio |
Radio |
FluxRadio |
toggle |
Toggle |
FluxSwitch |
otp |
OneTimeCodeInput |
FluxOtpInput |
Each Flux subclass extends the matching Filament native, so the full upstream DSL (autocomplete(), mask(), revealable(), searchable(), relationship(), etc.) keeps working — only the rendered markup changes.
FluxOtpInput now extends Filament\Forms\Components\OneTimeCodeInput (previously TextInput), so its container-bind chain matches Filament's class hierarchy. The custom digits() helper is gone in favour of the inherited length().| Filament | Laravel | PHP | Livewire | Flux |
|---|---|---|---|---|
| ^5.0 | ^11 / ^12 / ^13 | ^8.2 | ^4.0 | ^2.14 |
No breaking changes for users that don't call useEverywhere(). If you wrote code against FluxOtpInput::digits() or getDigits(), replace with length() / getLength().
Initial release of filament-flux for Filament v5.
FluxInput, FluxTextarea, FluxSelect, FluxCheckbox, FluxCheckboxGroup, FluxRadio, FluxRadioGroup, FluxSwitch, FluxOtpInput. Each extends the matching Filament native (TextInput/Textarea/Select/Checkbox/CheckboxList/Radio/Toggle) so the full upstream DSL — autocomplete(), mask(), length(), revealable(), step(), extraInputAttributes(), etc. — is inherited verbatim.
FluxAction (extends Filament\Actions\Action), FluxLinkAction, FluxDropdown (extends ActionGroup). DSL: fluxVariant(), fluxIcon(), fluxKbd(), fluxLoading(), fluxTooltip(), fluxSize(). Confirmation modals reuse Filament's native modal system.
FluxBadgeColumn (extends TextColumn), FluxAvatarColumn (extends ImageColumn), FluxIconColumn (extends IconColumn), FluxLinkColumn. Color resolver supports fixed string, state→color array, or closure.
FluxBadgeEntry, FluxAvatarEntry, FluxIconEntry, FluxTextEntry, FluxLinkEntry.
FluxHeading, FluxSubheading, FluxSeparator, FluxSpacer, FluxCallout, FluxFieldset, FluxCard, FluxSkeleton, FluxProgress.
FluxModal, FluxBreadcrumbs, FluxPagination, FluxToast, FluxIcon.
FilamentFluxPlugin::make() registers render hooks for [@fluxAppearance](https://github.com/fluxAppearance) / [@fluxScripts](https://github.com/fluxScripts), and a JS bridge that keeps Filament's theme switcher and Flux's appearance store in sync (cross-tab via storage events).php artisan filament-flux:install --panel=admin idempotently patches resources/css/filament/{panel}/theme.css with the required [@import](https://github.com/import) and [@source](https://github.com/source) directives.dist/filament-flux.css maps Filament's --color-primary-* onto Flux's --color-accent-* and adds a :focus-visible ring sourced from the panel's primary color.HasFluxIcon, HasFluxClearable, HasFluxCopyable, HasFluxKbd, HasFluxSize, HasFluxVariant, HasFluxLoading, HasFluxTooltip, HasFluxColor, HasFluxAvatar, HasFluxBadgeStyle.
| Filament | Laravel | PHP | Livewire | Flux |
|---|---|---|---|---|
| ^5.0 | ^11 / ^12 / ^13 | ^8.2 | ^4.0 | ^2.14 |
composer require jeffersongoncalves/filament-flux
php artisan make:filament-theme admin
php artisan filament-flux:install --panel=admin
npm run build
use Jeffersongoncalves\FilamentFlux\FilamentFluxPlugin;
return $panel->plugins([
FilamentFluxPlugin::make(),
]);
How can I help you explore Laravel packages today?