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+ and Livewire 3.5.19+. It also mandates Tailwind CSS v4.0+, which is compatible with Laravel’s default setup if you upgrade. Check your versions with `php artisan --version` and `composer show livewire/livewire`.
- How do I install Flux in an existing Laravel Livewire project?
- Run `composer require livewire/flux`, then add `@fluxAppearance` in your `<head>` and `@fluxScripts` before `</body>` in your layout file. Ensure Tailwind is configured in `app.css` with `@import '../../vendor/livewire/flux/dist/flux.css'`.
- Can I customize Flux’s Tailwind styles to match my design system?
- Yes, use `flux:publish` to publish Flux assets, then override Tailwind classes or variables in your `app.css`. Flux uses scoped classes, so conflicts are rare if Tailwind is configured cleanly. Document your overrides to avoid future issues.
- What’s the difference between free and Pro components in Flux?
- Free components include Button, Dropdown, Icon, Separator, and Tooltip. Pro adds advanced components like `flux:editor` and `flux:chart`. Pro requires a license key activated via `php artisan flux:activate`. Review the [Flux Pro pricing](https://fluxui.dev/pricing) for details.
- Will Flux work with Livewire’s Blaze rendering engine?
- Flux is optimized for Blaze (Livewire’s new rendering engine) and requires Livewire 3.5.19+. Test with Blaze 2.0+ for best performance. If you’re not ready to migrate, Flux will still work with classic Livewire but may have minor performance trade-offs.
- How do I handle internationalization (i18n) with Flux components?
- Flux supports Laravel’s `__()` helper for translations, including ARIA labels. Update your Blade templates to use `{{ __('label') }}` where needed. Flux v2.14.0+ includes fixes for i18n in core components like Tooltip.
- Does Flux add significant bundle size to my Laravel app?
- Flux components are optimized for Livewire and Blaze, minimizing hydration overhead. The core package adds ~50KB CSS/JS. Pro components may increase size further; audit your bundle with `npm run build -- --analyze` if performance is critical.
- Can I use Flux without Tailwind CSS, or with a different CSS framework?
- Flux is built for Tailwind CSS and requires it for styling. If you’re using Bootstrap or custom CSS, Flux won’t work out-of-the-box. For non-Tailwind projects, consider alternatives like Alpine.js + Tailwind or Laravel’s built-in components.
- How do I migrate from Bootstrap or another UI library to Flux?
- Start by replacing one component at a time (e.g., Bootstrap’s `btn` with `flux:button`). Use `flux:publish` to customize styles incrementally. Test in a staging environment to catch Tailwind conflicts early. Document the migration path for your team.
- Are there any known conflicts between Flux and other Laravel packages?
- Flux is designed to avoid conflicts with Laravel’s default setup. Potential issues may arise if you’re using custom Tailwind plugins or older versions of Livewire. Test with `php artisan optimize:clear` after installation to resolve caching issues.
Weaver
How can I help you explore Laravel packages today?