@elyracode/flux-ui
Elyra extension for Flux UI -- live component index, Blade-to-Flux converter, and page generator for Livewire 4 projects.
Install
elyra install npm:@elyracode/flux-ui
Tools
| Tool | Description |
|---|---|
flux_component_index | Fetch the live Flux UI component library from GitHub. Always up-to-date, cached for 24h. |
blade_to_flux | Analyze a Blade file and suggest Flux UI component replacements. |
flux_generate_page | Generate a complete page scaffold: Blade view, Livewire component, migration, route. |
Commands
/flux-- Interactive selector for all Flux UI tools
Usage
Live Component Reference
> Show me all available Flux UI components
> What props does flux:table support?
> Show me the flux:modal component API
The agent fetches the actual Flux UI source code from GitHub, so it always has the latest component APIs -- even components added yesterday.
Convert Existing Views
> Convert resources/views/users/index.blade.php to use Flux UI
> Analyze my dashboard view for Flux conversion opportunities
The agent scans your Blade file, identifies HTML/Tailwind patterns (tables, forms, modals, buttons), and suggests specific Flux replacements.
Generate New Pages
> Generate a products CRUD page with Flux UI
> Create a user settings page with profile form and password change
> Build a dashboard with stats cards and a recent orders table
The agent generates all four files: Blade view with Flux components, Livewire class with validation, migration, and route.
How It Works
- Component Index: Fetches
livewire/fluxfrom GitHub, filters to component files, extracts props and slots - Blade Converter: Pattern-matches 15+ HTML elements against Flux equivalents (button, input, select, table, modal, tabs, card, dropdown, breadcrumb, tooltip, switch, sidebar, header)
- Page Generator: Fetches the component index for accurate API usage, then provides structured generation instructions with Livewire 4 best practices (#[Validate], #[Computed], #[Url])
All GitHub fetches are cached at ~/.elyra/cache/github/ for 24 hours.