Skip to main content
Flux includes a comprehensive set of beautifully designed UI components built specifically for Laravel and Livewire applications. All components are fully accessible, customizable, and ready to use in your projects.

​
Form Components

Build robust forms with Flux’s extensive form component library:
  • Input - Text inputs with support for icons, validation states, and loading indicators
  • Textarea - Multi-line text inputs with configurable resize behavior
  • Select - Native select dropdowns with custom styling
  • Checkbox - Checkboxes with multiple variants (default, buttons, cards, pills)
  • Radio - Radio buttons with multiple variants (default, buttons, cards, pills, segmented)
  • Switch - Toggle switches for boolean values
  • OTP - One-time password input for verification codes
  • Avatar - User avatars with initials, images, or icons
  • Field - Form field wrapper with label, description, and error handling
  • Fieldset - Group related form controls together

​
Action Components

Components for user interactions and actions:
  • Button - Versatile button component with multiple variants and sizes
  • Dropdown - Dropdown menus and popovers
  • Tooltip - Contextual tooltips for additional information

​
Layout Components

Structure your application with these layout primitives:
  • Header - Application header with optional sticky positioning
  • Sidebar - Collapsible navigation sidebar
  • Footer - Application footer
  • Container - Centered content container with max-width
  • Separator - Visual dividers between content sections
Help users navigate through your application:

​
Feedback Components

Provide feedback and status information to users:
  • Badge - Status badges and labels with color variants
  • Callout - Highlighted messages and alerts
  • Modal - Dialog overlays and flyouts
  • Skeleton - Loading placeholders with animation

​
Display Components

Components for displaying content:
  • Icon - 300+ Heroicons with multiple variants
  • Card - Content cards

​
Getting Started

All Flux components follow consistent patterns:
  1. Livewire Integration - Seamless wire:model binding
  2. Validation - Automatic error state handling
  3. Dark Mode - Built-in dark mode support
  4. Accessibility - ARIA attributes and keyboard navigation
  5. Customization - Easily override styles with Tailwind classes
Each component supports standard HTML attributes and Alpine.js directives alongside Flux-specific props.

​
Component Patterns

​
Basic Usage

All Flux components use the flux: namespace: 
<flux:button>Click me</flux:button>

​
Attributes

Pass attributes like any HTML element: 
<flux:button variant="primary" size="sm" icon="check">
    Save Changes
</flux:button>

​
Slots

Many components support named slots for flexible composition: 
<flux:callout icon="information-circle">
    <flux:callout.heading>Important Note</flux:callout.heading>
    <flux:callout.text>Please review the changes carefully.</flux:callout.text>
</flux:callout>

​
Livewire Binding

Form components work seamlessly with Livewire: 
<flux:input wire:model="name" placeholder="Enter your name" />

​
Next Steps

Explore individual component documentation to learn about specific props, variants, and usage examples.