Weave Code
Flux Laravel Package
livewire/flux
Flux is a hand-crafted UI component library for Livewire apps, built with Tailwind CSS. Includes core components like Button, Dropdown, Icon, Separator, and Tooltip, with additional Pro components available via license.
Flux is a hand-crafted UI component library for Laravel Livewire (v3) apps, built on Tailwind CSS. It ships with polished Blade components and simple asset directives so you can drop consistent, customizable UI into your project fast.
The free tier includes core essentials, while additional components are available via Flux Pro (activate with php artisan flux:activate).
- Livewire-first components designed for reactive UIs
- Tailwind CSS v4 styling with easy theming support
- Simple setup via
@fluxAppearanceand@fluxScripts - Includes Button, Dropdown, Icon, Separator, Tooltip
- Optional Inter font integration for a modern baseline
Frequently asked questions about Flux
- What Laravel and Livewire versions does Flux support?
- Flux requires Laravel 10.0+, Livewire 3.5.19+, and Tailwind CSS 4.0+. Always pin Livewire to ^3.5.19 in `composer.json` to avoid breaking changes. Check the [Flux docs](https://github.com/livewire/flux) for updates before upgrading Laravel.
- How do I install Flux in my Laravel Livewire project?
- Run `composer require livewire/flux`, then add `@fluxAppearance` to your `<head>` and `@fluxScripts` before `</body>` in your layout. Ensure Tailwind is configured with `@import '../../vendor/livewire/flux/dist/flux.css'` in `app.css`. No extra steps needed for core components.
- Can I use Flux without Tailwind CSS?
- No, Flux is built on Tailwind CSS v4. If you’re not using Tailwind, you’ll need to adopt it first. Flux doesn’t work with Bootstrap or other CSS frameworks. The library leverages Tailwind’s utility classes for theming and consistency.
- What components are included in the free tier vs. Pro?
- The free tier includes Button, Dropdown, Icon, Separator, and Tooltip. Pro unlocks advanced components like modals, charts, and form inputs. Check [Flux Pro pricing](https://fluxui.dev/pricing) for details. Activate Pro with `php artisan flux:activate` after purchase.
- Will Flux work with Alpine.js or Inertia.js in my Livewire app?
- Yes, Flux is designed to coexist with Alpine.js and Inertia.js. Use `@stack` directives to isolate scripts if needed. However, Flux is optimized for Livewire’s reactivity model, so components like Dropdowns will work best with Livewire’s wire:model bindings.
- How do I customize Flux components or override styles?
- Publish Flux’s assets with `php artisan flux:publish` to copy components to `resources/views/vendor/flux`. Modify the Blade files or override Tailwind classes in your CSS. For theming, extend Tailwind’s config or use Flux’s built-in dark mode support.
- Does Flux add significant performance overhead?
- Flux is lightweight, with minimal JS/CSS. Use `@fluxScripts` only where needed (e.g., in layouts) to lazy-load assets. For tooltips or dropdowns, load scripts conditionally. Tailwind’s JIT mode further reduces rebuild times. Profile your bundle size with `npm run build -- --stats-json`.
- How do I test Flux components in my Laravel app?
- Test components in isolation using Livewire’s `wire:model` or `wire:click`. For unit tests, mock Livewire’s reactivity with `$this->set('property', value)`. Use PestPHP or PHPUnit to verify Blade rendering. Check Flux’s [demo site](https://fluxui.dev) for expected behavior.
- What if I need a component not in the free tier?
- Purchase a Pro license from [FluxUI.dev](https://fluxui.dev/pricing) and activate it with `php artisan flux:activate`. Pro components require a license key and may include advanced features like modals or data tables. Evaluate if free-tier components suffice for your MVP.
- Are there alternatives to Flux for Livewire UI components?
- Alternatives include **Livewire UI** (free, Bootstrap-based) or **Tailwind UI** (paid, framework-agnostic). Flux stands out for its Livewire-first design and Tailwind integration. If you’re using Bootstrap, **Bootstrap Livewire** might be a closer fit, but Flux offers more customization via Tailwind.
Weaver
How can I help you explore Laravel packages today?