| name | fluxui-development |
| description | Develops UIs with Flux UI Free components. Activates when creating buttons, forms, modals, inputs, dropdowns, checkboxes, or UI components; replacing HTML form elements with Flux; working with flux: components; or when the user mentions Flux, component library, UI components, form fields, or asks about available Flux components. |
Flux UI Development
When to Apply
Activate this skill when:
- Creating UI components or pages
- Working with forms, modals, or interactive elements
- Checking available Flux components
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.
Click me
Basic rules
- When creating new components ALWAYS use
php artisan make:livewire
- The component is created in resources/views/components/⚡component-name. But you almost must refer to it with component-name, without the emoji.
- The component is a single file component: all PHP and Blade code must go into it
- The ⚡ emoji means it is a Livewire component
Rules when displaying flash messages
- Use for flash messages, not custom code. This ensures consistent styling and behavior across the app.
- Trigger messages with $this->dispatch('event-name', message: 'Message text') in the component class, and listen for them with on="event-name" in the Blade template.
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.
Export
For icons not available in Heroicons, use Lucide. Import the icons you need with the Artisan command:
php artisan flux:icon crown grip-vertical github
Common Patterns
Form Fields
Email
Modals
Title
Content
Verification
- Check component renders correctly
- Test interactive states
- 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
