Skip to main content

​
Installation

Flux requires a modern Laravel application with Livewire v3 and Tailwind CSS v4. Follow this guide to get Flux up and running in your project.

​
Prerequisites

Before installing Flux, ensure your application meets these requirements:

Laravel

Version 10.0 or higher

Livewire

Version 3.5.19 or higher

Tailwind CSS

Version 4.0 or higher
If you don’t have Tailwind CSS installed yet, follow the Tailwind CSS installation guide for Laravel before proceeding.

​
Install Flux

1

Install via Composer

Run the following command from your project’s root directory:
composer require livewire/flux
This will install the Flux package and register the service provider automatically through Laravel’s package auto-discovery.
2

Configure Tailwind CSS

Add the Flux CSS imports to your resources/css/app.css file:
resources/css/app.css
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@custom-variant dark (&:where(.dark, .dark *));
The @custom-variant directive enables Flux’s dark mode support. This is required for proper dark mode functionality.
3

Add Flux Directives to Your Layout

Add the @fluxAppearance and @fluxScripts Blade directives to your layout file (e.g., resources/views/layouts/app.blade.php):
resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name', 'Laravel') }}</title>

    @fluxAppearance

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    {{ $slot }}

    @fluxScripts
</body>
</html>
  • @fluxAppearance should be placed in the <head> section
  • @fluxScripts should be placed before the closing </body> tag

​
Optional: Use the Inter Font

Flux is designed to work beautifully with the Inter font family. While optional, we recommend using it for the best visual experience.
1

Add the Font Link

Add the following to your layout’s <head> section:
<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" />
    @fluxAppearance
</head>
2

Configure Tailwind to Use Inter

Update your resources/css/app.css to set Inter as the default sans-serif font:
resources/css/app.css
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: Inter, sans-serif;
}

​
Verify Installation

Create a simple test view to verify Flux is working:
resources/views/test-flux.blade.php
<div class="p-8">
    <flux:heading size="lg">Hello from Flux!</flux:heading>
    <flux:separator class="my-4" />
    <flux:button>Click me</flux:button>
</div>
If you see a styled heading, separator, and button, Flux is successfully installed!

​
Upgrading Flux

To ensure you have the latest version of Flux, regularly update your dependencies: 
composer update livewire/flux
If you have Flux Pro installed: 
composer update livewire/flux livewire/flux-pro

​
Next Steps

Quick Start

Learn how to use Flux components in your application

Flux Pro

Install Flux Pro to unlock all components

​
Flux Pro Installation

If you’ve purchased a Flux Pro license, follow these additional steps to activate it:
1

Activate Your License

Run the activation command:
php artisan flux:activate
You’ll be prompted to enter:
  • Your email address (the one used for purchase)
  • Your license key
2

Verify Pro Installation

Once activated, you’ll have access to all Pro components including tables, modals, forms, and more.Test a Pro component:
<flux:modal name="example">
    <flux:heading>Pro Component</flux:heading>
    <flux:text>This is a Flux Pro modal!</flux:text>
</flux:modal>
Your license key is tied to your domain. For development, the license will work on localhost and .test domains automatically.

​
Customizing Components

To customize specific Flux components, you can publish their Blade view files: 
php artisan flux:publish
You’ll be prompted to select which components to publish. Published components will be placed in resources/views/flux/ and will override the default Flux components.
Only publish components you need to customize. This makes it easier to update Flux in the future without conflicts.
To publish all components at once: 
php artisan flux:publish --all

​
Troubleshooting

Make sure you’ve imported the Flux CSS file in your resources/css/app.css:
@import '../../vendor/livewire/flux/dist/flux.css';
Also ensure you’re running your build process (npm run dev or npm run build).
Ensure you’ve added the custom variant for dark mode:
@custom-variant dark (&:where(.dark, .dark *));
Dark mode is triggered by adding the dark class to the <html> element.
Make sure you’ve added the @fluxScripts directive before the closing </body> tag in your layout.
Ensure you have Livewire v3.5.19 or higher installed:
composer show livewire/livewire
Update if necessary:
composer update livewire/livewire

​
What’s Next?

Quick Start Guide

Learn how to build your first components with Flux

Build docs developers (and LLMs) love

Get started for freeTalk to us