Filament Flux Pro

https://github.com/jeffersongoncalves/filament-flux-pro
Admin
Filament Flux Pro is a Filament v5 plugin that integrates Livewire Flux Pro components as native...
Tokens:7,772
Snippets:62
Trust Score:9.8
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install and configure filament-flux-pro

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

Installs the package and runs the install command for the admin panel. The install command patches the theme.css with Tailwind v4 @source paths, publishes the config file, and warns if prerequisites are missing.

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

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

### Configure FluxFileUpload with accept, multiple, and disk settings

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

Configures a file upload field with accepted MIME types, multiple selection, max size in KB, disk, directory, and visibility. The example uses the s3 disk and private visibility.

```php
use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxFileUpload;

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

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

### Post-install commands

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

Post-install steps: activate Flux (one-time), build assets, and clear views.

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

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

### Create a Kanban page with FluxKanbanPage

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

Extend FluxKanbanPage to create a Kanban board. Override getKanbanModel(), getKanbanStatusField(), getKanbanColumns(), and optionally onKanbanMove() to handle column changes. The migration must include the status field (or the field returned by getKanbanStatusField()) and an 'order' column; override getKanbanOrderField() to use a different name.

```php
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()]);
        }
    }
}
```

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

### Register FilamentFluxProPlugin

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

Registers the free plugin first, then the Pro plugin with useEverywhere(), command palette enabled, and a custom shortcut. Forgetting the free plugin throws a RuntimeException.

```php
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')
        );
}
```

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

### Configure Flux Pro Composer repository and auth.json

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

Add the Flux Pro Composer repository to composer.json and create auth.json with your Flux Pro credentials. The auth.json file must be added to .gitignore to avoid committing your license credentials.

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

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

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

### Create a context menu with FluxContextMenu

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

Create a context menu with FluxContextMenu. Add items with icons and optional danger styling, and separate groups with separator(). Render the menu with render().

```php
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() }}
```

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

### Create record-scoped command palette with FluxCommandAction

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

Create a record-scoped command palette using FluxCommandAction. Pass a closure to fluxCommands() that receives the record and returns an array of commands with label and handler.

```php
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()],
    ]);
```

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

### Create a composer page with FluxComposerPage

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

Extend FluxComposerPage to create a composer page. Set the view and override onComposerSubmit() to handle the submitted state, which includes text, attachments, and mentions.

```php
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'],
        ]);
    }
}
```

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

### Configure FluxPillbox with options, custom entries, and max

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

Configures a pillbox (tag input) with options from a model, allowing custom entries, a maximum of 10 items, and a clearable control.

```php
use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxPillbox;

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

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

### Configure useEverywhere() bindings

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

Shows three ways to call useEverywhere(): enable all nine bindings, disable specific slugs (fileUpload, tagsInput), or disable everything with false.

```php
// 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))
```

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

### Configure FluxDatePicker, FluxDateTimePicker, FluxTimePicker, and FluxCalendar

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

Shows the main usage of FluxDatePicker, FluxDateTimePicker, FluxTimePicker, and FluxCalendar. The date picker supports single, range, and multiple modes, with time, locale, min/max, and presets. The calendar uses a multiple mode with available dates from a callback.

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

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

### Configure FluxColorPicker with format, swatches, and alpha

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

Configures a color picker with hex format, predefined swatches, and alpha channel support. The fluxFormat method accepts hex, rgb, or hsl.

```php
use Jeffersongoncalves\FilamentFluxPro\Forms\Components\FluxColorPicker;

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

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

### Configure FluxComposer with attachments and mentions

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

Configures a chat-style composer with attachments and @-mentions. The dehydrated state is either a plain string (when only text is filled) or an array ['text' => string, 'attachments' => array, 'mentions' => array].

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

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

### Create tabs with FluxTabs and fluxVariant

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

Create a tabbed form layout with FluxTabs. Use fluxVariant() to choose between 'default', 'pills', or 'segmented' styles. Each tab contains its own schema with form components.

```php
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'),
        ]),
    ]);
```

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

### Configure FluxAutocomplete with searchable options resolver

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

Configures an autocomplete field that searches users by name with a minimum of 2 characters and a 300ms debounce. The options resolver returns up to 20 matching users as an id-to-name array.

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

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

### Configure FluxEditor with toolbar, image upload, and sanitization

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

Configures a rich text editor with a custom toolbar, menu, min/max height, and image upload settings. The fluxSanitize() method runs every saved value through HtmlSanitizer, stripping script, style, iframe, on* event handlers, and javascript: URLs while keeping standard rich-text tags.

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

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

### Create an accordion with FluxAccordion

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

Create a collapsible accordion section with FluxAccordion. Set the heading, icon, and initial expanded state. The schema contains the form fields to show when expanded.

```php
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'),
    ]);
```

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

### Use CommandRegistry for standalone commands

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

Use CommandRegistry to create a free-standing collection of commands not bound to a page. Add commands with a key, label, handler, and optional icon. search() filters commands, and execute() dispatches the handler.

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

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

### Configure FluxSlider with single and range modes

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

Shows two slider configurations: a single-handle slider with a visible value, and a dual-handle range slider that stores an array [min, max] as state.

```php
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);
```

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

### Add command palette to a page with HasCommandPalette

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

Add the HasCommandPalette trait to a Filament page (e.g., Dashboard) to enable a command palette. Override getCommandPaletteCommands() to define commands with label, icon, optional shortcut, and handler. The trait exposes openCommandPalette(), closeCommandPalette(), toggleCommandPalette(), executeCommand($key), and getFilteredCommands(). Render the palette from the published view or pass $this->isCommandPaletteOpen to your own modal.

```php
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()),
            ],
        ];
    }
}
```

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

### Create a custom line chart widget with FluxLineChartWidget

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

Subclass FluxLineChartWidget to create a custom chart widget. Override getData() to return an array of date/value pairs. The default options are ['colors' => ['accent'], 'showLegend' => true, 'showGrid' => true, 'showAxis' => true] and can be overridden by re-implementing getOptions().

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

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

### Render a popover trigger with FluxPopover::trigger()

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

Render a popover trigger anywhere using FluxPopover::trigger(), which returns an HtmlString. The position attribute is HTML-escaped, so user-controlled values are safe.

```php
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',
) }}
```

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

### Add a sparkline chart column with FluxChartColumn

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

Add a sparkline chart to a table column using FluxChartColumn. Configure the chart type, data callback, color callback, height, and minimum width.

```php
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);
```
Tokens:
Raw