Flux

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.

Prerequisites

Flux requires the following before installing:

Laravel v10.0+
Livewire v3.5.19+
Tailwind CSS v4.0+

Installation

Run the following command from your project's root directory:

composer require livewire/flux

Getting Started

1. Include Flux Assets

Add the @fluxAppearance and @fluxScripts Blade directives to your layout file:

<head>
    ...
    @fluxAppearance
</head>

<body>
    ...
    @fluxScripts
</body>

2. Set up Tailwind CSS

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.

3. Use the Inter Font Family (Optional)

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;
}

What's included?

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

Pro Installation

If you have purchased a Flux Pro license, activate it using:

php artisan flux:activate

During activation, you'll be prompted for your email and license key.

Customization

To customize specific Flux components, publish their blade files using:

php artisan flux:publish

You'll be prompted to select which components to publish, or use --all to publish everything.

Keeping Updated

To ensure you have the latest version of Flux, regularly update your dependencies:

composer update livewire/flux livewire/flux-pro

For more detailed documentation and guides, visit https://fluxui.dev/docs.

Flux Laravel Package