Skip to main content

​
Flux UI

Flux is a robust, hand-crafted UI component library for Livewire applications. It’s built using Tailwind CSS and provides a comprehensive set of components that are easy to use and customize.

Get Started

Install Flux in your Laravel application and set up Tailwind CSS v4

Quick Start

Build your first Flux component in minutes

Components

Explore the full component library and interactive examples

Customization

Publish and customize Flux components to match your design

​
Key Features

​
Built for Livewire

Flux is designed specifically for Livewire v3.5.19+, providing seamless integration with reactive components, wire:model bindings, and automatic loading states.

​
Tailwind CSS v4

Leverage the power of the latest Tailwind CSS with built-in dark mode support, custom variants, and modern CSS features.

​
Free and Pro Tiers

Get started with essential components for free, including:
  • Button - Multiple variants (primary, outline, ghost, danger) with loading states
  • Dropdown - Flexible positioning and alignment options
  • Icon - Comprehensive icon library with multiple variants
  • Separator - Horizontal and vertical separators with optional text
  • Tooltip - Contextual tooltips for enhanced UX
Unlock the full library with Flux Pro including tables, modals, forms, navigation components, and more.

​
What’s Included (Free)

The livewire/flux package includes these core components:

Button

Versatile buttons with variants, sizes, icons, and loading states

Dropdown

Contextual dropdown menus with flexible positioning

Icon

Heroicons library with multiple size and style variants

Separator

Visual dividers for horizontal and vertical layouts

Tooltip

Helpful tooltips for any interactive element

​
Flux Pro

Upgrade to Flux Pro to access the complete component library including:
  • Forms - Input, textarea, select, radio groups, checkboxes, switches
  • Tables - Sortable columns, pagination, row selection
  • Navigation - Sidebar, navbar, navlist, navmenu components
  • Modals & Overlays - Modal dialogs, slideovers, alerts
  • Data Display - Cards, badges, profiles, progress indicators
  • Advanced Inputs - Date pickers, file uploads, OTP inputs

Get Flux Pro

Purchase a Pro license to unlock all components and features

​
Philosophy

Flux is hand-crafted with attention to detail, focusing on:
  • Developer Experience - Intuitive APIs and sensible defaults
  • Accessibility - ARIA attributes and keyboard navigation
  • Performance - Optimized rendering and minimal JavaScript
  • Customization - Easy to publish and modify individual components
  • Modern Styling - Beautiful defaults that work in light and dark modes

​
Next Steps

1

Installation

Install Flux via Composer and configure Tailwind CSS v4Read the installation guide →
2

Quick Start

Add Flux to your layout and start using componentsFollow the quick start guide →
3

Explore Components

Visit the interactive component library to see all available componentsBrowse components →