Imported from wxyClark/laravel-filament (.ai/skills/fluxui-development/SKILL.md). Install upstream with npx skills add wxyClark/laravel-filament --skill fluxui-development. Copyright stays with the author (MIT).

@php /** @var \Laravel\Boost\Install\GuidelineAssist $assist */ @endphp

Flux UI Development

Documentation

Use search-docs for detailed Flux UI patterns and documentation.

Basic Usage

This project uses the free edition of Flux UI, which includes all free components and variants but not Pro components.

Flux UI is a component library for Livewire built with Tailwind CSS. It provides components that are easy to use and customize.

Use Flux UI components when available. Fall back to standard Blade components when no Flux component exists for your needs.

@boostsnippet("Basic Button", "blade") <flux:button variant="primary">Click me</flux:button> @endboostsnippet

Available Components (Free Edition)

Available: avatar, badge, brand, breadcrumbs, button, callout, checkbox, dropdown, field, heading, icon, input, modal, navbar, otp-input, profile, radio, select, separator, skeleton, switch, text, textarea, tooltip

Icons

Flux includes Heroicons as its default icon set. Search for exact icon names on the Heroicons site - do not guess or invent icon names.

@boostsnippet("Icon Button", "blade") <flux:button icon="arrow-down-tray">Export</flux:button> @endboostsnippet

For icons not available in Heroicons, use Lucide. Import the icons you need with the Artisan command:

{{ $assist->artisanCommand('flux:icon crown grip-vertical github') }}

Common Patterns

Form Fields

@boostsnippet("Form Field", "blade") flux:field flux:labelEmail</flux:label> <flux:input type="email" wire:model="email" /> <flux:error name="email" /> </flux:field> @endboostsnippet

Modals

@boostsnippet("Modal", "blade") <flux:modal wire:model="showModal"> flux:headingTitle</flux:heading> Content </flux:modal> @endboostsnippet

Verification

1. Check component renders correctly
2. Test interactive states
3. Verify mobile responsiveness

Common Pitfalls

• Trying to use Pro-only components in the free edition
• Not checking if a Flux component exists before creating custom implementations
• Forgetting to use the search-docs tool for component-specific documentation
• Not following existing project patterns for Flux usage