PHPackages                             b4rightnow/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. [Framework](/categories/framework)
4. /
5. b4rightnow/flux

ActiveLibrary[Framework](/categories/framework)

b4rightnow/flux
===============

The official UI component library for Livewire.

016Blade

Since Jan 13Pushed 1y ago1 watchersCompare

[ Source](https://github.com/b4rightnow/flux)[ Packagist](https://packagist.org/packages/b4rightnow/flux)[ RSS](/packages/b4rightnow-flux/feed)WikiDiscussions main Synced 3w ago

READMEChangelogDependenciesVersions (1)Used By (0)

Flux
====

[](#flux)

Flux is the official UI component library for [Livewire](https://livewire.laravel.com).

You can view the components in action at .

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

[](#installation)

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

```
composer require b4rightnow/flux --prefer-dist
```

Flux has built-in scripts and styles that are required to use the components. Add the following to your app template's `head` and `body` tags:

```

    ...

    @fluxStyles

    ...

    @fluxScripts

```

Flux uses Tailwind CSS for its styles.

To get started quickly, you can include the Tailwind Play CDN in your `head` tag:

```

    ...

    @fluxStyles

```

Or, for a more robust setup, you can include Flux's Blade files as part of your build in your Tailwind config's `content` array:

```
module.exports = {
    content: [
        ...,
        "./vendor/b4rightnow/flux-pro/stubs/**/*.blade.php",
        "./vendor/b4rightnow/flux/stubs/**/*.blade.php",
    ],
    ...
}
```

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

[](#whats-included)

The following components are included in the `b4rightnow/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:

###  Health Score

15

—

LowBetter than 3% of packages

Maintenance31

Infrequent updates — may be unmaintained

Popularity6

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity16

Early-stage or recently created project

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://avatars.githubusercontent.com/u/77179745?v=4)[b4rightnow](/maintainers/b4rightnow)[@b4rightnow](https://github.com/b4rightnow)

### Embed Badge

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

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

###  Alternatives

[laravel/socialite

Laravel wrapper around OAuth 1 & OAuth 2 libraries.

5.7k104.3M829](/packages/laravel-socialite)[laravel/dusk

Laravel Dusk provides simple end-to-end testing and browser automation.

1.9k38.6M289](/packages/laravel-dusk)[pinguo/php-msf

Pinguo Micro Service Framework For PHP

1.7k4.2k](/packages/pinguo-php-msf)[nineinchnick/edatatables

Grid widget for the Yii Framework, wrapper for the DataTables jQuery plugin

173.2k](/packages/nineinchnick-edatatables)[link-cloud/fast-hyperf

LinkCloud Fast Hyperf

241.2k1](/packages/link-cloud-fast-hyperf)

PHPackages © 2026

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