HestiaKit

Installation

Flux is a robust, hand-crafted, UI component library for your Livewire applications. It's built using Tailwind CSS and provides a set of components that are easy to use and customize.

Prerequisites

Flux requires the following before installing:

  • PHP 8.1 or higher
  • Laravel 9.0 or higher
  • Livewire 3.0 or higher
  • Tailwind CSS 3.0 or higher
1

Install Flux

Flux can be installed via composer from your project root:

composer require livewire/flux
2

Install Flux Pro (optional)

If you have purchased a Flux Pro license, you can install it using the following command:

php artisan flux:activate

Note: During the activation process, you will be prompted to enter an email and license key. If you haven't purchased a Flux Pro license, you can purchase one here →

3

Include Flux assets

Now, add the @fluxAppearance and @fluxScripts Blade directives to your layout file:

<head>
    ...
    @fluxAppearance
</head>
<body>
    ...
    @fluxScripts
</body>
4

Set up Tailwind CSS

The last step is to set up Tailwind CSS. Flux uses Tailwind CSS for its default styling.

Important: Flux v2.0 requires Tailwind CSS v4.0 or later.

If you already have Tailwind installed in your project, just 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.

5

Use the Inter font family

Although completely optional, we recommend using the Inter font family for your application.

Add the following to the head tag in your layout file to ensure the font is loaded:

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

You can configure Tailwind to use this font family in your resources/css/app.css file:

@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
...
@theme {
    --font-sans: Inter, sans-serif;
}

Theming

We've meticulously designed Flux to look great out of the box, however, every project has its own identity. You can choose from our hand-picked color schemes or build your own theme by customizing CSS variables.

Disable dark mode

By default, Flux will handle the appearance of your application by adding a dark class to the html element depending on the user's system preference or selected appearance.

If you don't want Flux to handle this for you, you can remove the @fluxAppearance directive from your layout file:

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

Now you can handle the appearance of your application manually.

Publishing components

To keep things simple, you can use the internal Flux components in your Blade files directly. However, if you'd like to customize a specific Flux component, you can publish its blade file(s) into your project using the following Artisan command:

php artisan flux:publish

You will be prompted to search and select which components you want to publish. If you want to publish all components at once, you can use the --all flag.

Keeping Flux updated

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

composer update livewire/flux livewire/flux-pro

If you've published Flux components, make sure to check the changelog for any breaking changes before updating.

Cloning an existing project

If you're cloning an existing project that uses Flux Pro, you will need to authenticate your Flux Pro installation.

When running composer install, you will be prompted to provide a username and password:

  • Enter your Flux account email as the username
  • Enter your Flux license key as the password

To avoid manually typing these credentials, you can create a Composer auth.json file.

To do this, run the following command before you run composer install:

composer config http-basic.composer.fluxui.dev your-email your-license-key

Important: Make sure to replace your-email and your-license-key with your actual Flux account email and license key.