README

Filament Flux Pro

Filament v5 plugin that exposes Livewire Flux Pro components — Date Picker, Calendar, Color Picker, Editor, File Upload, Slider, Pillbox, Autocomplete, Charts, Tabs, Accordion, Popover, Kanban, Command Palette, Composer and Context Menu — as native Filament Form Fields, Widgets, Schema Components and Page Concerns.

⚠️ This package requires a commercial Flux Pro license. The wrapper itself is MIT-licensed, but the runtime dependency livewire/flux-pro is proprietary. Buy at https://fluxui.dev before installing.

Compatibility

What you get

• Form Fields: FluxDatePicker, FluxDateTimePicker, FluxTimePicker, FluxCalendar, FluxColorPicker, FluxEditor, FluxFileUpload, FluxSlider, FluxPillbox, FluxAutocomplete, FluxComposer
• Widgets: FluxLineChartWidget, FluxAreaChartWidget, FluxBarChartWidget (and FluxChartWidget abstract)
• Table Columns: FluxChartColumn (sparkline)
• Schema Components: FluxTabs, FluxAccordion
• Page Concerns: HasKanban, HasCommandPalette, HasComposer + FluxKanbanPage, FluxCommandPalettePage, FluxComposerPage abstract bases
• Actions: FluxCommandAction
• Helpers: FluxPopover, FluxContextMenu, EditorImageUploader, HtmlSanitizer, KanbanColumnDefinition, KanbanCardData, CommandRegistry

Pre-requisites

Before you run composer require:

1. Add the Flux Pro Composer repository to your project's composer.json:

   {
       "repositories": [
           {
               "name": "flux-pro",
               "type": "composer",
               "url": "https://composer.fluxui.dev"
           }
       ]
   }

2. Create auth.json in your project root with your Flux Pro credentials:

   {
       "http-basic": {
           "composer.fluxui.dev": {
               "username": "your-license-email@example.com",
               "password": "your-license-key"
           }
       }
   }

3. Add auth.json to .gitignore — these credentials authenticate against your paid license. Never commit them.

4. Register the free plugin first. This package depends on jeffersongoncalves/filament-flux being installed and registered on the panel.

Installation

composer require jeffersongoncalves/filament-flux-pro
php artisan filament-flux-pro:install --panel=admin

The install command:

• Patches resources/css/filament/{panel}/theme.css with the @source paths Tailwind v4 needs to scan Flux Pro's stubs and this plugin's views.
• Publishes the config file (config/filament-flux-pro.php).
• Warns if any of the pre-requisites above are missing.

After running it:

php artisan flux:activate     # one-time, if not already done
npm run build
php artisan view:clear

Plugin registration

Register the free plugin first, then this one:

use Jeffersongoncalves\FilamentFlux\FilamentFluxPlugin;
use Jeffersongoncalves\FilamentFluxPro\FilamentFluxProPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->plugin(FilamentFluxPlugin::make())
        ->plugin(
            FilamentFluxProPlugin::make()
                ->useEverywhere()
                ->enableCommandPalette()
                ->commandPaletteShortcut('cmd+k')
        );
}

If you forget the free plugin, registration throws a RuntimeException telling you to add it.

Auto-bind Filament fields to their Flux Pro replacements

useEverywhere() rebinds Filament's own form fields to their Flux Pro equivalents through the service container, so existing Resources keep calling DatePicker::make(), RichEditor::make(), etc. and receive the Flux Pro version at runtime.

// All nine bindings on:
->plugin(FilamentFluxProPlugin::make()->useEverywhere())

// Disable specific slugs:
->plugin(FilamentFluxProPlugin::make()->useEverywhere([
    'fileUpload' => false,
    'tagsInput' => false,
]))

// Disable everything:
->plugin(FilamentFluxProPlugin::make()->useEverywhere(false))

Form Fields

FluxDatePicker / FluxDateTimePicker / FluxTimePicker / FluxCalendar

use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxCalendar;
use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxDatePicker;
use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxDateTimePicker;
use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxTimePicker;

FluxDatePicker::make('published_at')
    ->fluxMode('single')           // single | range | multiple
    ->fluxWithTime()
    ->fluxLocale('pt_BR')
    ->fluxMin('2026-01-01')
    ->fluxMax('2026-12-31')
    ->fluxPresets(['today', 'last-7-days', 'this-month'])
    ->required();

FluxDatePicker::make('campaign_period')
    ->fluxMode('range')
    ->fluxPresets([
        'Q1 2026' => ['2026-01-01', '2026-03-31'],
        'Q2 2026' => ['2026-04-01', '2026-06-30'],
    ]);

FluxDateTimePicker::make('starts_at');
FluxTimePicker::make('slot')->fluxStep(900);

FluxCalendar::make('availability')
    ->fluxMode('multiple')
    ->fluxAvailableDates(fn () => Booking::availableDates());

FluxColorPicker

use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxColorPicker;

FluxColorPicker::make('brand_color')
    ->fluxFormat('hex')             // hex | rgb | hsl
    ->fluxSwatches(['#ef4444', '#22c55e', '#3b82f6', '#a855f7'])
    ->fluxAlpha();

FluxEditor

use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxEditor;

FluxEditor::make('content')
    ->fluxToolbar(['bold', 'italic', '|', 'bullet-list', 'ordered-list', '|', 'link', 'image', 'codeblock', '|', 'undo', 'redo'])
    ->fluxMenu()
    ->fluxMinHeight('200px')
    ->fluxMaxHeight('600px')
    ->fluxImageUpload(
        disk: 'public',
        directory: 'editor/images',
        visibility: 'public',
        maxSize: 5120,
        accept: ['image/jpeg', 'image/png', 'image/webp'],
    )
    ->fluxSanitize();

fluxSanitize() runs every saved value through HtmlSanitizer, which strips <script>, <style>, <iframe>, on* event handlers and javascript: URLs while keeping the standard rich-text tag set (p, strong, em, a, h1-h6, ul, ol, li, code, pre, blockquote, img, …).

FluxFileUpload

use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxFileUpload;

FluxFileUpload::make('attachments')
    ->fluxAccept(['image/*', 'application/pdf'])
    ->fluxMultiple()
    ->fluxMaxSize(10240)             // KB
    ->fluxDisk('s3')
    ->fluxDirectory('uploads/users')
    ->fluxVisibility('private');

FluxSlider

use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxSlider;

FluxSlider::make('quality')
    ->fluxMin(0)
    ->fluxMax(100)
    ->fluxStep(5)
    ->fluxShowValue();

FluxSlider::make('budget')
    ->fluxRange()                // dual-handle slider with array state [min, max]
    ->fluxMin(0)
    ->fluxMax(10000)
    ->fluxStep(100);

FluxPillbox

use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxPillbox;

FluxPillbox::make('tags')
    ->options(Tag::pluck('name', 'id'))
    ->fluxAllowCustom()
    ->fluxMax(10)
    ->fluxClearable();

FluxAutocomplete

use App\Models\User;
use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxAutocomplete;

FluxAutocomplete::make('user_id')
    ->fluxSearchable()
    ->fluxMinChars(2)
    ->fluxDebounce(300)
    ->fluxOptionsResolver(
        fn (string $search) => User::where('name', 'like', "%{$search}%")
            ->limit(20)
            ->pluck('name', 'id')
            ->toArray()
    );

FluxComposer

Chat-style input with attachments and @-mentions:

use App\Models\User;
use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxComposer;

FluxComposer::make('message')
    ->fluxAllowAttachments()
    ->fluxAllowMentions(fn (string $search) => User::search($search)->pluck('name', 'id')->toArray())
    ->fluxPlaceholder('Type a message…')
    ->fluxSubmitOnEnter();

The dehydrated state is either a plain string (when only text is filled) or an array ['text' => string, 'attachments' => array, 'mentions' => array].

Charts

Three abstract widgets ready to subclass:

use App\Models\Revenue;
use Jeffersongoncalves\FilamentFluxPro\Widgets\FluxLineChartWidget;

class RevenueChart extends FluxLineChartWidget
{
    protected static ?string $heading = 'Monthly revenue';

    protected ?string $description = 'Last 12 months';

    protected int $height = 300;

    protected function getData(): array
    {
        return Revenue::lastYear()
            ->groupByMonth()
            ->get()
            ->map(fn ($r) => [
                'date' => $r->month,
                'revenue' => $r->total,
            ])
            ->toArray();
    }
}

FluxAreaChartWidget and FluxBarChartWidget work the same way. The default option set is ['colors' => ['accent'], 'showLegend' => true, 'showGrid' => true, 'showAxis' => true] and can be overridden by re-implementing getOptions().

FluxChartColumn (sparkline in tables)

use Jeffersongoncalves\FilamentFluxPro\Tables\Columns\FluxChartColumn;

FluxChartColumn::make('sales_trend')
    ->fluxType('line')             // line | area | bar
    ->fluxData(fn ($record) => $record->last30DaysSales())
    ->fluxColor(fn ($record) => $record->trend > 0 ? 'lime' : 'red')
    ->fluxHeight(40)
    ->fluxMinWidth(80);

Schema components

FluxTabs

use Filament\Schemas\Components\Tabs\Tab;
use Jeffersongoncalves\FilamentFluxPro\Components\FluxTabs;
use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxDatePicker;
use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxEditor;

FluxTabs::make('Post')
    ->fluxVariant('pills')           // default | pills | segmented
    ->tabs([
        Tab::make('Content')->schema([
            FluxEditor::make('body'),
        ]),
        Tab::make('Publishing')->schema([
            FluxDatePicker::make('published_at'),
        ]),
    ]);

FluxAccordion

use Jeffersongoncalves\FilamentFluxPro\Components\FluxAccordion;
use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxComposer;

FluxAccordion::make('advanced')
    ->fluxHeading('Advanced settings')
    ->fluxIcon('cog-6-tooth')
    ->fluxExpanded(false)
    ->schema([
        FluxComposer::make('notes'),
    ]);

FluxPopover

FluxPopover::trigger() returns an HtmlString you can render anywhere:

use Jeffersongoncalves\FilamentFluxPro\Components\FluxPopover;

{{ FluxPopover::trigger(
    triggerHtml: '<flux:button>Details</flux:button>',
    contentHtml: '<flux:heading>Record details</flux:heading><flux:text>…</flux:text>',
    position: 'bottom',
) }}

The position attribute is HTML-escaped, so user-controlled values are safe.

FluxContextMenu

use Jeffersongoncalves\FilamentFluxPro\Components\FluxContextMenu;

{{ FluxContextMenu::make()
    ->item('Edit', 'editRecord', icon: 'pencil')
    ->item('Duplicate', 'duplicateRecord', icon: 'document-duplicate')
    ->separator()
    ->item('Delete', 'deleteRecord', icon: 'trash', danger: true)
    ->render() }}

Pages

Kanban

use Filament\Pages\Page;
use Illuminate\Database\Eloquent\Model;
use Jeffersongoncalves\FilamentFluxPro\Pages\FluxKanbanPage;
use Jeffersongoncalves\FilamentFluxPro\Support\KanbanColumnDefinition;

class TasksKanban extends FluxKanbanPage
{
    protected function getKanbanModel(): string
    {
        return Task::class;
    }

    protected function getKanbanStatusField(): string
    {
        return 'status';
    }

    protected function getKanbanColumns(): array
    {
        return [
            KanbanColumnDefinition::make('todo', 'To do')->color('zinc'),
            KanbanColumnDefinition::make('doing', 'In progress')->color('amber'),
            KanbanColumnDefinition::make('done', 'Done')->color('lime')
                ->meta(fn (Task $task) => 'Completed ' . $task->completed_at?->diffForHumans()),
        ];
    }

    protected function onKanbanMove(Model $record, string $toColumn, int $newOrder): void
    {
        if ($toColumn === 'done') {
            $record->update(['completed_at' => now()]);
        }
    }
}

The Kanban migration must include status (or whatever getKanbanStatusField() returns) and an order column. Override getKanbanOrderField() to use a different name.

Command Palette

use Filament\Pages\Dashboard;
use Jeffersongoncalves\FilamentFluxPro\Pages\Concerns\HasCommandPalette;

class CustomDashboard extends Dashboard
{
    use HasCommandPalette;

    protected $listeners = ['open-command-palette' => 'openCommandPalette'];

    protected function getCommandPaletteCommands(): array
    {
        return [
            'create-invoice' => [
                'label' => 'New invoice',
                'icon' => 'document-plus',
                'shortcut' => 'cmd+i',
                'handler' => fn () => redirect(InvoiceResource::getUrl('create')),
            ],
            'go-to-customers' => [
                'label' => 'Go to customers',
                'icon' => 'users',
                'handler' => fn () => redirect(CustomerResource::getUrl()),
            ],
        ];
    }
}

The trait already exposes openCommandPalette(), closeCommandPalette(), toggleCommandPalette(), executeCommand($key) and getFilteredCommands(). Render the palette from vendor/jeffersongoncalves/filament-flux-pro/resources/views/pages/command-palette-modal.blade.php (publish + customize when needed) or pass $this->isCommandPaletteOpen to your own modal.

CommandRegistry helper

If you want a free-standing collection of commands (not bound to a page), use the registry:

use Jeffersongoncalves\FilamentFluxPro\Support\CommandRegistry;

$registry = (new CommandRegistry)
    ->add('inv', 'New invoice', fn () => Invoice::create(), icon: 'document-plus')
    ->add('go-customers', 'Go to customers', fn () => redirect()->route('customers.index'));

$registry->search('invoice');     // filtered
$registry->execute('inv');        // dispatch handler

FluxCommandAction (record-scoped command palette)

use Jeffersongoncalves\FilamentFluxPro\Actions\FluxCommandAction;

FluxCommandAction::make('actions')
    ->fluxCommands(fn ($record) => [
        'edit' => ['label' => 'Edit', 'handler' => fn () => $record->edit()],
        'archive' => ['label' => 'Archive', 'handler' => fn () => $record->archive()],
    ]);

Composer page

use Jeffersongoncalves\FilamentFluxPro\Pages\FluxComposerPage;

class TicketChat extends FluxComposerPage
{
    protected static string $view = 'filament.pages.ticket-chat';

    protected function onComposerSubmit(array $state): void
    {
        Comment::create([
            'ticket_id' => $this->ticketId,
            'body' => $state['text'],
            'attachments' => $state['attachments'],
            'mentions' => $state['mentions'],
        ]);
    }
}

When to reach for filament-flux-pro

Troubleshooting

• composer require fails with Could not find package livewire/flux-pro — your composer.json is missing the composer.fluxui.dev repository. See Pre-requisites above.
• composer require fails with Could not authenticate against composer.fluxui.dev — auth.json is missing or has invalid credentials. Re-create it with the email + license key from your Flux Pro account.
• auth.json shows up in git status — add it to .gitignore immediately. The install command warns about this.
• RuntimeException: FilamentFluxProPlugin requires FilamentFluxPlugin to be registered first — list the free plugin before the Pro one in your panel provider's ->plugin() chain.
• Kanban resets cards to position 0 on drag-drop — your migration is missing the order column. Either add an order integer column or override getKanbanOrderField() to point to your existing column.
• Command palette hotkey doesn't fire — the page must dispatch open-command-palette itself or listen with protected $listeners = ['open-command-palette' => 'openCommandPalette'];. The plugin only exposes the configuration; binding the keystroke is your responsibility.
• Editor saves raw HTML with <script> tags — make sure fluxSanitize() is on (default) and that you're reading the dehydrated state from the form, not the raw Livewire property.

License

The wrapper code in this repository is MIT — see LICENSE.md. It does not grant any rights to livewire/flux-pro; you need a separate commercial Flux license from https://fluxui.dev to install and run this plugin.