Weave Code
Flux Laravel Package
livewire/flux
Hand-crafted UI components for Livewire apps, built with Tailwind CSS. Includes buttons, dropdowns, icons, separators, and tooltips, plus a larger Pro set. Requires Laravel 10+, Livewire 3.5.19+, and Tailwind 4+.
The official Livewire UI component library
Frequently asked questions about Flux
- What Laravel and Livewire versions does Flux support?
- Flux requires **Laravel 10+**, **Livewire 3.5.19+**, and **Tailwind CSS 4.0+**. It’s fully tested with Laravel 10–13 and Livewire 3.5.19+, including Blaze 2.0 support since v2.12.1. Always check the [Flux GitHub](https://github.com/livewire/flux) for the latest compatibility notes before upgrading.
- How do I install Flux in my Laravel project?
- Run `composer require livewire/flux` from your project root. Then add `@fluxAppearance` in your `<head>` and `@fluxScripts` before `</body>` in your Blade layout. Ensure Tailwind is configured (v4.0+) and import Flux’s CSS in `app.css` with `@import '../../vendor/livewire/flux/dist/flux.css'`.
- Which Flux components are free vs. Pro?
- Free components include **buttons, dropdowns, icons, separators, and tooltips**. Pro components (e.g., modals, tables, accordions) require a license. Check the [Flux Pro pricing](https://fluxui.dev/pricing) for details. Activate Pro with `php artisan flux:activate` after purchasing.
- Can I use Flux with Alpine.js or Inertia.js?
- Flux is **Livewire-native** and officially supports Alpine.js for non-Livewire interactions. However, **Inertia.js is not officially supported**—Flux relies on Livewire’s reactivity model. If you’re using Inertia, consider alternatives like Tailwind UI or custom components.
- Will Flux work with my existing Tailwind customizations?
- Flux is built with Tailwind, but **heavy customizations (e.g., overriding core classes like `.btn`)** may break its styles. Test components on a staging page first. Use `@layer components` in your CSS to safely extend Flux’s styles without conflicts.
- How do I lazy-load Flux components for better performance?
- Flux doesn’t natively support lazy-loading, but you can manually load component CSS/JS only on pages where they’re needed. For example, wrap `@fluxAppearance` and `@fluxScripts` in Blade `@if` checks or use Alpine.js to dynamically inject scripts. Monitor bundle size with `npm run build -- --stats-json`.
- What’s the rollback plan if Flux causes issues?
- Remove Flux with `composer remove livewire/flux` and delete its Blade directives. Replace components with vanilla Tailwind or alternatives like Bootstrap. Backup your `app.css` and `tailwind.config.js` before integrating Flux. Test critical pages post-rollback.
- Are there alternatives to Flux for Livewire apps?
- Yes. For free options, consider **Laravel Breeze/Jetstream** (basic components), **Tailwind UI** (customizable but not Livewire-specific), or **Alpine.js libraries** like Alpine.js Components. For Pro-tier alternatives, **Bootstrap 5** or **PrimeVue** (with Livewire bridges) may fit.
- How do I test Flux components in my Laravel app?
- Use Laravel’s built-in testing tools. For Livewire components, test reactivity with `Livewire::test()` in PHPUnit. Example: `Livewire::test(FluxButton::class)->assertSee('Button Text')`. For visual regression, use tools like **Pest + Laravel Dusk** or **Storybook** (if configured).
- Does Flux work with Laravel Mix/Vite for asset compilation?
- Flux has **no build tool conflicts**—it works with **Laravel Mix, Vite, or no build tool**. However, ensure Tailwind is properly compiled. If using Vite, verify `@fluxAppearance` and `@fluxScripts` load assets correctly. Flux’s CSS/JS are static files, so no Webpack/Vite-specific config is needed.
Weaver
How can I help you explore Laravel packages today?