Filament Flux

https://github.com/jeffersongoncalves/filament-flux
Admin
Filament Flux is a Filament v5 plugin that integrates Livewire Flux UI components as native form...
Tokens:7,523
Snippets:55
Trust Score:9.8
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### 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 <head>
    ->injectScripts(true);                // controls @fluxScripts before </body>
```

--------------------------------

### 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();
```

--------------------------------

### 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: <flux:modal> 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');
```

--------------------------------

### 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
```

--------------------------------

### 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 <select> with client-side searchable, etc.
    'otp' => false,
]);
```

--------------------------------

### Disable theme bridge wrapper with scopeClass(null)

Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md

Disables the theme bridge wrapper so Flux's native zinc palette is used instead of Filament's mapped tokens. Call this when configuring the FilamentFluxPlugin.

```php
FilamentFluxPlugin::make()->scopeClass(null);
```

--------------------------------

### Blade modal with trigger for confirmation

Source: https://github.com/jeffersongoncalves/filament-flux/blob/1.x/README.md

Use in Custom Pages to render a confirmation modal with a trigger button. The modal is identified by the name 'confirm-delete' and uses the 'floating' variant positioned on the right. The trigger button opens the modal when clicked.

```blade
<x-flux::modal name="confirm-delete" variant="floating" position="right">
    <x-flux::heading>Confirm deletion</x-flux::heading>
    <x-flux::text>This action cannot be undone.</x-flux::text>
</x-flux::modal>

<x-flux::modal.trigger name="confirm-delete">
    <x-flux::button variant="danger">Delete</x-flux::button>
</x-flux::modal.trigger>
```
Tokens:
Raw