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.

Name		Name	Last commit message	Last commit date
Latest commit History 432 Commits
.github		.github
dist		dist
src		src
stubs/resources/views/flux		stubs/resources/views/flux
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
README.md		README.md
composer.json		composer.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Flux

Prerequisites

Installation

Getting Started

1. Include Flux Assets

2. Set up Tailwind CSS

3. Use the Inter Font Family (Optional)

What's included?

Pro Installation

Customization

Keeping Updated

About

Uh oh!

Releases 63

Used by 4.3k

Contributors 21

Languages

livewire/flux

Folders and files

Latest commit

History

Repository files navigation

Flux

Prerequisites

Installation

Getting Started

1. Include Flux Assets

2. Set up Tailwind CSS

3. Use the Inter Font Family (Optional)

What's included?

Pro Installation

Customization

Keeping Updated

About

Resources

Security policy

Uh oh!

Stars

Watchers

Forks

Releases 63

Used by 4.3k

Contributors 21

Languages