### Install filament-flux and build assets Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Install the package, create a Filament theme, run the installer for the admin panel, and build assets. The installer patches the theme CSS idempotently. ```bash composer require jeffersongoncalves/filament-flux php artisan make:filament-theme admin php artisan filament-flux:install --panel=admin npm run build ``` -------------------------------- ### Configure plugin options Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Configure plugin options: wrapper class on every page, appearance injection, and script injection. Also installs a JavaScript bridge between Filament's theme switcher and Flux's appearance store. ```php FilamentFluxPlugin::make() ->scopeClass('filament-flux-scope') // wrapper class on every page; pass null to disable ->injectAppearance(true) // controls @fluxAppearance in ->injectScripts(true); // controls @fluxScripts before ``` -------------------------------- ### Use schema components for forms and infolists Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Use the schema components (FluxHeading, FluxSubheading, FluxSeparator, FluxSpacer, FluxCallout, FluxFieldset, FluxCard, FluxSkeleton, FluxProgress) as drop-in replacements for forms and infolists. The example shows typical usage for each component, including variant options for FluxCallout and schema nesting for FluxFieldset and FluxCard. ```php use Jeffersongoncalves\FilamentFlux\Schemas\Components\{ FluxHeading, FluxSubheading, FluxSeparator, FluxSpacer, FluxCallout, FluxFieldset, FluxCard, FluxSkeleton, FluxProgress, }; FluxHeading::make('Account')->level('2')->size('xl'); FluxSubheading::make('Profile details')->size('sm'); FluxSeparator::make()->orientation('horizontal')->variant('subtle')->text('OR'); FluxSpacer::make(); FluxCallout::make() ->variant('warning') // success | danger | warning | secondary ->fluxIcon('exclamation-triangle') ->heading('Heads up') ->text('Action required.'); FluxFieldset::make('Personal info')->schema([ FluxInput::make('first_name'), FluxInput::make('last_name'), ]); FluxCard::make()->schema([ FluxInput::make('email'), ]); FluxSkeleton::make()->class('h-10 w-full'); FluxProgress::make()->value(72)->fluxColor('lime'); ``` -------------------------------- ### Create link action, column, and entry Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Use FluxLinkAction, FluxLinkColumn, and FluxLinkEntry to create link-based components in actions, table columns, and infolists. The examples show how to set URLs, open in a new tab with external(), and optionally add an icon or variant. ```php use Jeffersongoncalves\FilamentFlux\Actions\FluxLinkAction; use Jeffersongoncalves\FilamentFlux\Tables\Columns\FluxLinkColumn; use Jeffersongoncalves\FilamentFlux\Infolists\Components\FluxLinkEntry; FluxLinkAction::make('docs') ->url('https://example.com/docs') ->external() ->fluxIcon('book-open'); FluxLinkColumn::make('homepage') ->href(fn ($state, $record) => $record->homepage_url) ->external() ->fluxVariant('subtle'); FluxLinkEntry::make('homepage') ->href(fn ($state, $record) => $record->homepage_url) ->external(); ``` -------------------------------- ### Theme CSS imports for filament-flux Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md CSS imports added to resources/css/filament/{panel}/theme.css by the installer. Tailwind v4 picks up Flux and the package's view scanning automatically. ```css @import "tailwindcss"; @import "../../../../vendor/livewire/flux/dist/flux.css"; @import "../../../../vendor/jeffersongoncalves/filament-flux/dist/filament-flux.css"; ``` -------------------------------- ### Render FluxIcon inline Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Use the FluxIcon helper to render an icon inline within Blade templates or closures. The example creates a star icon with an outline variant and applies a size-6 CSS class. ```php use Jeffersongoncalves\FilamentFlux\Support\FluxIcon; // Inline rendering inside Blade or Closures. echo FluxIcon::make('star')->fluxVariant('outline')->class('size-6'); ``` -------------------------------- ### Run project tests, analysis, and formatting Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Runs the project's test suite, static analysis, and code formatting checks via Composer scripts. ```bash composer test composer analyse composer format ``` -------------------------------- ### Enable Flux navigation Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Replace Filament's sidebar and topbar items with Flux navlist/navbar markup while keeping Filament's data layer intact. ```php FilamentFluxPlugin::make()->useFluxNavigation(); ``` -------------------------------- ### Configure Filament infolist entries with FluxBadgeEntry, FluxAvatarEntry, FluxIconEntry, and FluxTextEntry Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Shows how to use FluxBadgeEntry, FluxAvatarEntry, FluxIconEntry, and FluxTextEntry in Filament infolists. The badge entry uses a fixed blue color and a shield-check icon; the avatar entry uses a closure for the name and size 'lg'; the icon entry uses 'solid' variant and red color; the text entry uses size 'lg' and zinc color. ```php use Jeffersongoncalves\FilamentFlux\Infolists\Components\{FluxBadgeEntry, FluxAvatarEntry, FluxIconEntry, FluxTextEntry}; FluxBadgeEntry::make('role') ->fluxColor('blue') ->fluxIcon('shield-check'); FluxAvatarEntry::make('avatar') ->fluxName(fn ($state, $record) => $record->name) ->fluxSize('lg'); FluxIconEntry::make('priority') ->fluxIconVariant('solid') ->fluxColor('red'); FluxTextEntry::make('description') ->fluxSize('lg') ->fluxColor('zinc'); ``` -------------------------------- ### Enable Flux theme switcher Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Replace the three-button theme switcher with a single flux:dropdown carrying a flux:menu of light/dark/system modes. Off by default; dispatches Filament's theme-changed event on selection. ```php FilamentFluxPlugin::make()->useFluxNavigation([ 'themeSwitcher' => true, ]); ``` -------------------------------- ### Enable Flux components with useFluxComponents() Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Enable Flux Blade components globally or opt-in per slug. The granular array accepts boolean values for each slug; omit or set false to keep Filament's original view. ```php FilamentFluxPlugin::make()->useFluxComponents(); // or granular: FilamentFluxPlugin::make()->useFluxComponents([ 'badge' => true, 'avatar' => true, 'icon' => true, 'link' => true, // omit/false → keep Filament's view ]); ``` -------------------------------- ### Enable full panel shell Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Enable the full panel shell override, which rewrites the outer aside into flux:sidebar and wraps main content in flux:main. Off by default and the most invasive override; opt in only after confirming render hooks and customizations still work. ```php FilamentFluxPlugin::make()->useFluxNavigation([ 'shell' => true, ]); ``` -------------------------------- ### Configure Filament table columns with FluxBadgeColumn, FluxAvatarColumn, and FluxIconColumn Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Shows how to use FluxBadgeColumn, FluxAvatarColumn, and FluxIconColumn in Filament table columns. The badge column maps statuses to colors and conditionally adds an icon; the avatar column uses a closure for the name and color, sets size 'sm', and adds a green status dot; the icon column uses a closure for color and sets the icon variant to 'solid'. ```php use Jeffersongoncalves\FilamentFlux\Tables\Columns\{FluxBadgeColumn, FluxAvatarColumn, FluxIconColumn}; FluxBadgeColumn::make('status') ->fluxColor([ 'draft' => 'zinc', 'published' => 'lime', 'archived' => 'red', ]) ->fluxIcon(fn ($state) => $state === 'published' ? 'check-circle' : null) ->fluxBadgeVariant('pill'); FluxAvatarColumn::make('user.avatar') ->fluxName(fn ($state, $record) => $record->user->name) ->fluxColor(fn ($state, $record) => $record->user->is_admin ? 'blue' : 'zinc') ->fluxSize('sm') ->fluxBadge('green'); // status dot FluxIconColumn::make('priority') ->fluxColor(fn ($state) => $state === 'high' ? 'red' : 'zinc') ->fluxIconVariant('solid'); ``` -------------------------------- ### Render breadcrumbs and pagination Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Render breadcrumbs and pagination in a Blade view. FluxBreadcrumbs::make() builds a breadcrumb trail with links and an optional icon. FluxPagination::make($posts) renders pagination controls for the given posts collection. ```php use Jeffersongoncalves\FilamentFlux\Components\FluxBreadcrumbs; use Jeffersongoncalves\FilamentFlux\Components\FluxPagination; {!! FluxBreadcrumbs::make() ->add('Home', '/') ->add('Posts', '/posts', 'document-text') ->add('Edit') !!} {!! FluxPagination::make($posts) !!} ``` -------------------------------- ### Configure Flux navigation areas Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Granular per-area opt-out for navigation. The plugin prepends hint paths to the filament-panels view namespace; missing files fall back to vendor copies. ```php FilamentFluxPlugin::make()->useFluxNavigation([ 'sidebar' => true, 'topbar' => false, // keep Filament's topbar items as-is 'shell' => true, // see "Full panel shell" below 'themeSwitcher' => true, // see "Theme switcher" below ]); ``` -------------------------------- ### Create OTP input with FluxOtpInput Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Use FluxOtpInput to create an OTP input field with a length of 6 digits. The private() method masks the digits, and required() makes the field mandatory. ```php use Jeffersongoncalves\FilamentFlux\Forms\Components\FluxOtpInput; FluxOtpInput::make('code') ->length(6) ->private() // mask the digits ->required(); ``` -------------------------------- ### Enable useEverywhere for all fields Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Auto-replace Filament form fields with Flux subclasses. Existing Resources keep calling TextInput::make(), Select::make(), etc., and receive the matching Flux subclass automatically. ```php FilamentFluxPlugin::make()->useEverywhere(); ``` -------------------------------- ### Use fluxColor() with fixed, state map, or closure forms Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Shows the three accepted forms for the fluxColor() method: a fixed color string, a state-to-color map, and a closure that receives $state and $record. Valid Flux colors are zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose. ```php ->fluxColor('lime') // fixed ->fluxColor(['draft' => 'zinc', 'done' => 'lime']) // state map ->fluxColor(fn ($state, $record) => 'blue') // closure ``` -------------------------------- ### Create Filament actions with Flux components Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Define Filament actions with Flux styling. FluxAction supports fluxVariant, fluxIcon, fluxKbd, fluxLoading, fluxTooltip, and requiresConfirmation (which delegates to Filament's native modal). FluxDropdown groups multiple FluxAction instances with a label and icon. Note: is not available in Flux free; use Filament modals or Alpine in Custom Pages. ```php use Jeffersongoncalves\FilamentFlux\Actions\{FluxAction, FluxDropdown}; FluxAction::make('publish') ->fluxVariant('primary') // outline | filled | primary | danger | ghost | subtle ->fluxIcon('rocket-launch') ->fluxKbd('cmd+enter') ->fluxLoading() // bool or wire:target string ->fluxTooltip('Publish now') ->requiresConfirmation() // delegates to Filament's native modal ->action(fn (Post $record) => $record->publish()); FluxDropdown::make([ FluxAction::make('edit'), FluxAction::make('archive'), FluxAction::make('delete'), ]) ->label('Actions') ->fluxIcon('ellipsis-horizontal'); ``` -------------------------------- ### Open Flux modal programmatically from Livewire Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Programmatically open the 'confirm-delete' modal from a Livewire component. The FluxModal::openEvent method returns an event payload that is spread into the dispatch call. This is used when you need to open the modal without a trigger click. ```php use Jeffersongoncalves\FilamentFlux\Components\FluxModal; $this->dispatch(...array_values(FluxModal::openEvent('confirm-delete'))); ``` -------------------------------- ### Register FilamentFluxPlugin in panel Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Register the plugin in a Filament panel provider. Required before using any plugin features. ```php use Filament\Panel; use Jeffersongoncalves\FilamentFlux\FilamentFluxPlugin; public function panel(Panel $panel): Panel { return $panel->plugins([ FilamentFluxPlugin::make(), ]); } ``` -------------------------------- ### Create Filament form fields with Flux components Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Create Filament form fields using Flux components. Each field supports Flux-specific methods like fluxIcon, fluxClearable, fluxCopyable, fluxVariant, and fluxAlign. The FluxCheckboxGroup and FluxRadioGroup accept a fluxVariant option with the listed defaults. ```php use Jeffersongoncalves\FilamentFlux\Forms\Components\{FluxInput, FluxTextarea, FluxSelect, FluxCheckbox, FluxCheckboxGroup, FluxRadio, FluxRadioGroup, FluxSwitch}; FluxInput::make('email') ->email() ->fluxIcon('envelope') ->fluxClearable() ->fluxCopyable() ->required(); FluxTextarea::make('bio')->rows(8)->resize('vertical'); FluxSelect::make('status') ->options(['draft' => 'Draft', 'published' => 'Published']) ->required(); FluxCheckbox::make('terms')->required(); FluxCheckboxGroup::make('tags') ->fluxVariant('cards') // default | cards | pills | buttons ->options(Tag::pluck('name', 'id')); FluxRadioGroup::make('plan') ->fluxVariant('segmented') // default | segmented | cards ->options(['free' => 'Free', 'pro' => 'Pro']); FluxSwitch::make('notifications')->fluxAlign('right'); ``` -------------------------------- ### Dispatch success toast notification Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Dispatch a success toast notification from Livewire. The FluxToast::success method creates a toast with the message 'Saved!' and the heading 'Done'. The dispatchArgs method returns the arguments needed for the dispatch call. ```php use Jeffersongoncalves\FilamentFlux\Components\FluxToast; $this->dispatch(...FluxToast::success('Saved!')->heading('Done')->dispatchArgs()); ``` -------------------------------- ### Opt out of specific field replacements Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md Granular opt-out per field slug. Available slugs include input, textarea, select, checkbox, checkboxList, radio, toggle, and otp; all default to true when useEverywhere() is called. ```php FilamentFluxPlugin::make()->useEverywhere([ 'select' => false, // keep Filament's