Flux is a robust, hand-crafted UI component library for Livewire applications. It's built using Tailwind CSS and provides a set of components that are easy to use and customize.
You can view the components in action at https://fluxui.dev.
Flux requires the following before installing:
- Laravel v10.0+
- Livewire v3.5.19+
- Tailwind CSS v4.0+
Run the following command from your project's root directory:
composer require livewire/fluxAdd the @fluxAppearance and @fluxScripts Blade directives to your layout file:
<head>
...
@fluxAppearance
</head>
<body>
...
@fluxScripts
</body>Flux uses Tailwind CSS for its default styling. Add the following configuration to your resources/css/app.css file:
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
@custom-variant dark (&:where(.dark, .dark *));If you don't have Tailwind installed, you can learn how to install it on the Tailwind website.
We recommend using the Inter font family. Add the following to your layout file:
<head>
...
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
</head>Configure Tailwind to use this font in your resources/css/app.css:
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
...
@theme {
--font-sans: Inter, sans-serif;
}The following components are included in the livewire/flux package:
The rest of the Flux components are part of the paid (Pro) tier of Flux.
Purchase a "Pro" license key here: https://fluxui.dev/pricing
If you have purchased a Flux Pro license, activate it using:
php artisan flux:activateDuring activation, you'll be prompted for your email and license key.
To customize specific Flux components, publish their blade files using:
php artisan flux:publishYou'll be prompted to select which components to publish, or use --all to publish everything.
To ensure you have the latest version of Flux, regularly update your dependencies:
composer update livewire/flux livewire/flux-proFor more detailed documentation and guides, visit https://fluxui.dev/docs.