Elyra
Start here
Quickstart
Using Elyra
Providers
Settings
Keybindings
Sessions
Compaction
Customization
Extensions
Skills
Prompt Templates
Themes
Elyra Packages
Custom Models
Custom Providers
Extensions
Overview
Subagents
Doctor
Test Generation
Performance Tools
Design Tools
Flux UI
Database Tools
HTTP Tools
Git Intelligence
Herd
Laravel Starters
i18n Tools
Stack profiles
Overview
TALL
VILT
RILT
PrimeVue
Filament
Laravel AI SDK
Reference
Session Format
Programmatic Usage
SDK
RPC Mode
JSON Event Stream Mode
TUI Components
Platform Setup
Windows
Termux on Android
tmux
Terminal Setup
Shell Aliases
Development
Development
Elyra
Elyra
Docs
Flux UI

Flux UI

Live component index, Blade‑to‑Flux converter, and a full page generator.

@elyracode/flux-ui gives the agent up‑to‑date knowledge of every Flux UI component by fetching livewire/flux directly from GitHub. It also converts existing Blade views and scaffolds new pages with Livewire 4 best practices.

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

Command Description
/flux Interactive selector for all Flux UI tools

Examples

Live component reference

> Show me all available Flux UI components
> What props does flux:table support?
> Show me the flux:modal component API

Convert existing views

> Convert resources/views/users/index.blade.php to use Flux UI
> Analyze my dashboard view for Flux conversion opportunities

The agent 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 #[Validate] / #[Computed] / #[Url], migration, and route.

How it works

  1. Component index — fetches livewire/flux from GitHub, filters component files, extracts props and slots
  2. Blade converter — pattern‑matches 15+ HTML elements against Flux equivalents (button, input, select, table, modal, tabs, card, dropdown, breadcrumb, tooltip, switch, sidebar, header, …)
  3. Page generator — fetches the component index for accurate API usage, then produces structured generation instructions with Livewire 4 best practices

All GitHub fetches are cached at ~/.elyra/cache/github/ for 24 hours.

Back to docs