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
What’s Included (Free)
Thelivewire/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
Installation
Install Flux via Composer and configure Tailwind CSS v4Read the installation guide →
Quick Start
Add Flux to your layout and start using componentsFollow the quick start guide →
Explore Components
Visit the interactive component library to see all available componentsBrowse components →