PHP8 - Laravel 12

Appearance

Core Concepts - Flux UI Components ​

Introduction ​

Flux is the official UI component library for Livewire applications, built by the same team behind Livewire and Alpine. It's a comprehensive system of professionally designed components that seamlessly integrate with Livewire. Flux provides a complete suite of UI components that follow consistent design principles and work harmoniously together to create beautiful, functional interfaces.

Key Principles ​

Simplicity First ​

Flux prioritizes simplicity in both its syntax and implementation. Components are designed to be intuitive and easy to use, with clear, concise APIs that follow consistent naming patterns.

html
<flux:input name="email" label="Email"/>

Composition Over Inheritance ​

Components are designed to be composed together, creating more complex interfaces from simpler building blocks. This approach gives you flexibility while maintaining consistency.

html
<flux:dropdown>
    <flux:button>Options</flux:button>

    <flux:dropdown.content>
        <flux:dropdown.item>Edit</flux:dropdown.item>
        <flux:dropdown.item>Duplicate</flux:dropdown.item>
        <flux:dropdown.item>Delete</flux:dropdown.item>
    </flux:dropdown.content>
</flux:dropdown>

"We Style, You Space" ​

Flux handles the internal styling of components (padding, colors, typography) but leaves the spacing between components (margins, layout) to you. This approach provides a consistent visual language while giving you control over your layout.

Consistent Naming ​

Flux maintains consistent naming conventions across all components. For example, components use "heading" and " subheading" consistently instead of mixing "title", "subtitle", or "caption" throughout the library.

Installation ​

Requirements ​

  • Laravel v10.0+
  • Livewire v3.5.19+
  • Tailwind CSS v4.0+

Basic Installation ​

  1. Install via Composer:

    bash
    composer require livewire/flux

  2. Include Flux assets in your layout:

    html
    <head>
    <!-- ... -->
    @fluxAppearance
</head>
<body>
    <!-- ... -->
    @fluxScripts
</body>

  3. Configure Tailwind CSS:

    css
    @import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
@custom-variant dark (&:where(.dark, .dark \*));

Core Components ​

Flux offers both free and Pro components:

Free Components ​

  • Button - For actions and form submissions
  • Dropdown - For contextual menus and options
  • Icon - Over 500 icons from popular icon sets
  • Separator - For visually separating content
  • Tooltip - For providing additional context

Pro Components ​

Requires a license key - premium components for building sophisticated interfaces:

  • Table - For displaying and manipulating tabular data
  • Calendar - For date selection and scheduling
  • Charts - For data visualization
  • Command palette - For keyboard-driven interfaces
  • Editor - For rich text editing
  • And many more

Customization ​

Theme Customization ​

Flux can be customized through CSS variables or by choosing from pre-built themes. You can adjust colors, typography, spacing, and other design elements.

Component Customization ​

For deeper customization, you can publish components to your project:

bash
php artisan flux:publish

This allows you to fully customize the HTML and Blade templating of published components.

Dark Mode Support ​

Flux handles dark mode automatically through the @fluxAppearance directive, which adds a dark class to the HTML element based on user preferences or system settings.

Usage Examples ​

Simple Form ​

html
<form wire:submit="save">
    <div class="space-y-4">
        <flux:heading>Create New Project</flux:heading>
        <flux:subheading>Fill in the details below to create your project</flux:subheading>

        <flux:input name="name" label="Project Name" wire:model="form.name"/>

        <flux:textarea name="description" label="Description" wire:model="form.description"/>

        <flux:button type="submit">Create Project</flux:button>
    </div>
</form>

Complex Component Composition ​

html
<flux:card>
    <flux:card.header>
        <flux:heading>Team Members</flux:heading>
        <flux:dropdown placement="bottom-end">
            <flux:button variant="ghost" icon="settings"/>

            <flux:dropdown.content>
                <flux:dropdown.item wire:click="exportMembers">Export</flux:dropdown.item>
                <flux:dropdown.item wire:click="importMembers">Import</flux:dropdown.item>
                <flux:dropdown.separator/>
                <flux:dropdown.item wire:click="deleteAll" class="text-red-500">Delete All</flux:dropdown.item>
            </flux:dropdown.content>
        </flux:dropdown>
    </flux:card.header>

    <flux:card.content>
        <!-- Team member list -->
    </flux:card.content>

    <flux:card.footer>
        <flux:button wire:click="addMember">Add Member</flux:button>
    </flux:card.footer>
</flux:card>

Best Practices ​

  1. Use Composition - Build complex interfaces from simpler components
  2. Handle Layout Separately - Use CSS frameworks or utilities for layout while letting Flux handle component styling
  3. Keep Components Focused - Each component should have a clear, single responsibility
  4. Follow Naming Conventions - Use consistent naming patterns across your application
  5. Leverage Native Elements - Flux builds on native browser features when possible

Conclusion ​

Flux provides a comprehensive UI component library for Livewire applications, focusing on simplicity, composition, and consistent design. By following the principles and patterns established by Flux, you can build beautiful, functional interfaces with minimal effort while maintaining full control over the final result.

Last updated:

© 2025 - Vince Colson & Patrick Verhaert