PHPackages                             flux-clone/ui - 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. [Templating & Views](/categories/templating)
4. /
5. flux-clone/ui

ActiveLibrary[Templating & Views](/categories/templating)

flux-clone/ui
=============

A beautiful Blade UI component library for Laravel & Livewire - Flux UI alternative

v1.0.7(3mo ago)059MITBladePHP ^8.2

Since Dec 21Pushed 3mo agoCompare

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

READMEChangelogDependencies (5)Versions (9)Used By (0)

Flux Clone UI
=============

[](#flux-clone-ui)

A beautiful Blade UI component library for Laravel & Livewire - A Flux UI alternative.

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

[](#installation)

Install the package via Composer:

```
composer require flux-clone/ui
```

The package will auto-register its service provider.

Requirements
------------

[](#requirements)

- PHP 8.2+
- Laravel 11+ or 12+
- Livewire 3+
- Tailwind CSS 4+
- Alpine.js (included with Livewire)

Configuration
-------------

[](#configuration)

### Tailwind CSS

[](#tailwind-css)

Add the package's view path to your `tailwind.config.js` (or CSS for Tailwind 4):

```
/* For Tailwind 4 - add to your app.css */
@source "../vendor/flux-clone/ui/resources/views/**/*.blade.php";
```

Or for legacy Tailwind config:

```
export default {
  content: [
    // ... your existing paths
    "./vendor/flux-clone/ui/resources/views/**/*.blade.php",
  ],
};
```

Usage
-----

[](#usage)

All components use the `flux-clone` namespace:

```
Click me

    Confirm Action
    Are you sure?

        Cancel

```

Available Components
--------------------

[](#available-components)

### Form Components

[](#form-components)

- `` - Buttons with variants (primary, danger, ghost, subtle, outline, filled)
- `` - Input fields with label, error handling, password visibility
- `` - Textarea with label and error handling
- `` - Select dropdown with custom styling
- `` - Checkbox with label and description
- `` - Radio button with icon support
- `` - Radio group with segmented variant
- `` - Toggle switch
- `` - Field wrapper for form elements

### Typography

[](#typography)

- `` - Heading with sizes (xs, sm, base, lg, xl, 2xl)
- `` - Subheading text
- `` - Body text

### Layout

[](#layout)

- `` - Card container
- `` - Horizontal/vertical separator
- `` - Navigation bar
- `` - Navigation list
- `` - Navigation list item

### Overlays

[](#overlays)

- `` - Modal dialog with Alpine.js
- `` - Modal trigger
- `` - Modal close button
- `` - Dropdown menu
- `` - Tooltip with position options

### Data Display

[](#data-display)

- `` - Table with striped, hoverable options
- `` - Table header
- `` - Table body
- `` - Table row
- `` - Table cell with sortable support
- `` - Badge with colors and variants
- `` - Avatar with image or initials

### Feedback

[](#feedback)

- `` - Callout/Alert with types (info, success, warning, danger)
- `` - Loading skeleton

### Other

[](#other)

- `` - Icon component (supports Heroicons)
- `` - Styled link

Component Examples
------------------

[](#component-examples)

### Button Variants

[](#button-variants)

```
Primary
Danger
Ghost
Subtle
Outline

{{-- With icons --}}
Save

{{-- Sizes --}}
Extra Small
Small
Large
```

### Input with Password Toggle

[](#input-with-password-toggle)

```

```

### Table with Sorting

[](#table-with-sorting)

```

            Name
            Email
            Actions

        @foreach($users as $user)

                {{ $user->name }}
                {{ $user->email }}

                    Edit

        @endforeach

```

### Modal with Livewire

[](#modal-with-livewire)

```
{{-- Using wire:model --}}

    Modal Title
    Modal content here...

            Cancel

            Save

{{-- Or using named modals --}}

    Delete

    Confirm Delete
    Are you sure you want to delete this item?

```

Customization
-------------

[](#customization)

### Publishing Views

[](#publishing-views)

To customize component views:

```
php artisan vendor:publish --tag=flux-clone-views
```

Views will be published to `resources/views/vendor/flux-clone`.

### Using with Blade Icons

[](#using-with-blade-icons)

For full icon support, install Blade Icons:

```
composer require blade-ui-kit/blade-heroicons
```

Then use icons by name:

```

```

Dark Mode
---------

[](#dark-mode)

All components support dark mode out of the box. They use Tailwind's `dark:` prefix, so ensure your app is configured for dark mode:

```

```

Or use JavaScript to toggle:

```
document.documentElement.classList.toggle("dark");
```

License
-------

[](#license)

MIT License

###  Health Score

39

—

LowBetter than 86% of packages

Maintenance78

Regular maintenance activity

Popularity10

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 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.

###  Release Activity

Cadence

Every ~3 days

Total

8

Last Release

115d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/73d6027c699ada7a46bfe225a31ebf0b224050d84ee1c2fc751a6b515697e998?d=identicon)[toniliu672](/maintainers/toniliu672)

---

Top Contributors

[![toniliu672](https://avatars.githubusercontent.com/u/71494942?v=4)](https://github.com/toniliu672 "toniliu672 (8 commits)")

---

Tags

laraveluicomponentsbladelivewiretailwind

###  Code Quality

TestsPest

### Embed Badge

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

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

###  Alternatives

[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k454.7k15](/packages/robsontenorio-mary)[mati365/ckeditor5-livewire

CKEditor 5 integration for Laravel Livewire

413.9k](/packages/mati365-ckeditor5-livewire)[electrik/slate

Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project

102.3k1](/packages/electrik-slate)[ddfsn/blade-components

Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.

193.1k](/packages/ddfsn-blade-components)

PHPackages © 2026

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