PHPackages                             kenndeclouv/flux - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. kenndeclouv/flux

ActiveLibrary

kenndeclouv/flux
================

The official UI component library for Livewire.

398Blade

Since Mar 7Pushed 1y ago1 watchersCompare

[ Source](https://github.com/kenndeclouv/flux)[ Packagist](https://packagist.org/packages/kenndeclouv/flux)[ RSS](/packages/kenndeclouv-flux/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Flux
====

[](#flux)

Flux is a robust, hand-crafted UI component library for [Livewire](https://livewire.laravel.com) applications. It's built using [Tailwind CSS](https://tailwindcss.com) and provides a set of components that are easy to use and customize.

You can view the components in action at .

Prerequisites
-------------

[](#prerequisites)

Flux requires the following before installing:

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

Installation
------------

[](#installation)

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

```
composer require kenndeclouv/flux
```

Getting Started
---------------

[](#getting-started)

### 1. Include Flux Assets

[](#1-include-flux-assets)

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

```

    ...
    @fluxAppearance

    ...
    @fluxScripts

```

### 2. Set up Tailwind CSS

[](#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/kenndeclouv/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](https://tailwindcss.com/docs/guides/laravel).

### 3. Use the Inter Font Family (Optional)

[](#3-use-the-inter-font-family-optional)

We recommend using the [Inter font family](https://rsms.me/inter). Add the following to your layout file:

```

    ...

```

Configure Tailwind to use this font in your `resources/css/app.css`:

```
@import 'tailwindcss';
@import '../../vendor/kenndeclouv/flux/dist/flux.css';

...

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

What's included?
----------------

[](#whats-included)

The following components are included in the `kenndeclouv/flux` package:

- [Button](https://fluxui.dev/components/button)
- [Dropdown](https://fluxui.dev/components/dropdown)
- [Icon](https://fluxui.dev/components/icon)
- [Separator](https://fluxui.dev/components/separator)
- [Tooltip](https://fluxui.dev/components/tooltip)

The rest of the Flux components are part of the paid (Pro) tier of Flux.

Purchase a "Pro" license key here:

Pro Installation
----------------

[](#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
-------------

[](#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
---------------

[](#keeping-updated)

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

```
composer update kenndeclouv/flux kenndeclouv/flux-pro
```

For more detailed documentation and guides, visit .

###  Health Score

18

—

LowBetter than 8% of packages

Maintenance34

Infrequent updates — may be unmaintained

Popularity13

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity15

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/44dfd46f08bb4ca31c8ab431ac53388433957fa37c35e9ceea78b661440a0f71?d=identicon)[kenndeclouv](/maintainers/kenndeclouv)

---

Top Contributors

[![kenndeclouv](https://avatars.githubusercontent.com/u/146813701?v=4)](https://github.com/kenndeclouv "kenndeclouv (2 commits)")

### Embed Badge

![Health badge](/badges/kenndeclouv-flux/health.svg)

```
[![Health](https://phpackages.com/badges/kenndeclouv-flux/health.svg)](https://phpackages.com/packages/kenndeclouv-flux)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)