PHPackages livewire/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. [Utility & Helpers](/categories/utility) 4. / 5. livewire/flux ActiveLibrary[Utility & Helpers](/categories/utility) livewire/flux ============= The official UI component library for Livewire. v2.13.1(1mo ago)9385.0M—4.8%101[6 issues](https://github.com/livewire/flux/issues)20proprietaryBladePHP ^8.1 Since Sep 19Pushed 1mo ago23 watchersCompare [ Source](https://github.com/livewire/flux)[ Packagist](https://packagist.org/packages/livewire/flux)[ RSS](/packages/livewire-flux/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (12)Versions (119)Used By (20) 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 livewire/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/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](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/livewire/flux/dist/flux.css'; ... @theme { --font-sans: Inter, sans-serif; } ``` What's included? ---------------- [](#whats-included) The following components are included in the `livewire/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 livewire/flux livewire/flux-pro ``` For more detailed documentation and guides, visit . ### Health Score 70 — ExcellentBetter than 100% of packages Maintenance90 Actively maintained with recent releases Popularity69 Solid adoption and visibility Community49 Growing community involvement Maturity65 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits 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. ### Release Activity Cadence Every ~6 days Total 91 Last Release 54d ago Major Versions v1.1.4 → v2.0.02025-02-19 v1.1.5 → v2.0.12025-02-20 1.x-dev → v2.0.42025-02-28 ### Community Maintainers ![](https://www.gravatar.com/avatar/4608292025df3cf1d9db20c0484c7d0a3542e9a63fc681fae175e0233f1c250a?d=identicon)[calebporzio](/maintainers/calebporzio) ![](https://www.gravatar.com/avatar/e4ad7053094ebecf63993d76e363d37d39ad322351abb57bdf1727f39222ea68?d=identicon)[joshhanley](/maintainers/joshhanley) --- Top Contributors [![calebporzio](https://avatars.githubusercontent.com/u/3670578?v=4)](https://github.com/calebporzio "calebporzio (321 commits)")[![joshhanley](https://avatars.githubusercontent.com/u/882837?v=4)](https://github.com/joshhanley "joshhanley (257 commits)")[![ganyicz](https://avatars.githubusercontent.com/u/3823354?v=4)](https://github.com/ganyicz "ganyicz (41 commits)")[![bensherred](https://avatars.githubusercontent.com/u/22666637?v=4)](https://github.com/bensherred "bensherred (19 commits)")[![Awesomolocity](https://avatars.githubusercontent.com/u/4923647?v=4)](https://github.com/Awesomolocity "Awesomolocity (5 commits)")[![sajjadhossainshohag](https://avatars.githubusercontent.com/u/63788037?v=4)](https://github.com/sajjadhossainshohag "sajjadhossainshohag (3 commits)")[![ghabriel25](https://avatars.githubusercontent.com/u/151924216?v=4)](https://github.com/ghabriel25 "ghabriel25 (3 commits)")[![scottzirkel](https://avatars.githubusercontent.com/u/1329131?v=4)](https://github.com/scottzirkel "scottzirkel (2 commits)")[![marcorivm](https://avatars.githubusercontent.com/u/1222598?v=4)](https://github.com/marcorivm "marcorivm (2 commits)")[![sinlyusan](https://avatars.githubusercontent.com/u/258928169?v=4)](https://github.com/sinlyusan "sinlyusan (2 commits)")[![SRWieZ](https://avatars.githubusercontent.com/u/1408020?v=4)](https://github.com/SRWieZ "SRWieZ (2 commits)")[![idealerror](https://avatars.githubusercontent.com/u/13846420?v=4)](https://github.com/idealerror "idealerror (2 commits)")[![ThomasEnssner](https://avatars.githubusercontent.com/u/1965267?v=4)](https://github.com/ThomasEnssner "ThomasEnssner (2 commits)")[![nox-software](https://avatars.githubusercontent.com/u/80551452?v=4)](https://github.com/nox-software "nox-software (2 commits)")[![fotrino](https://avatars.githubusercontent.com/u/4334696?v=4)](https://github.com/fotrino "fotrino (2 commits)")[![rzv-me](https://avatars.githubusercontent.com/u/38325118?v=4)](https://github.com/rzv-me "rzv-me (2 commits)")[![AbdelrhmanSaid](https://avatars.githubusercontent.com/u/70618755?v=4)](https://github.com/AbdelrhmanSaid "AbdelrhmanSaid (1 commits)")[![vorban](https://avatars.githubusercontent.com/u/16322680?v=4)](https://github.com/vorban "vorban (1 commits)")[![andreilungeanu](https://avatars.githubusercontent.com/u/95976259?v=4)](https://github.com/andreilungeanu "andreilungeanu (1 commits)")[![awietz](https://avatars.githubusercontent.com/u/5380597?v=4)](https://github.com/awietz "awietz (1 commits)") --- Tags laraveluicomponentsfluxlivewire ### Embed Badge ![Health badge](/badges/livewire-flux/health.svg) ``` [![Health](https://phpackages.com/badges/livewire-flux/health.svg)](https://phpackages.com/packages/livewire-flux) ``` ### Alternatives [laravel/pulse Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application. 1.7k12.1M99](/packages/laravel-pulse)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[ympact/flux-icons A package to provide icons from different vendors for Livewire Flux. 116.2k](/packages/ympact-flux-icons)[glhd/conveyor-belt 14797.0k](/packages/glhd-conveyor-belt)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 116.6k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)