FLUXUI COMPONENT LIBRARY

Official Livewire UI Components - Quick Reference Guide
Installation & Setup
Step Command / Code
Install composer require livewire/flux
Activate PRO php artisan flux:activate
Head directive @fluxAppearance
Body directive @fluxScripts
Tailwind import @import 'vendor/livewire/flux/dist/flux.css';
Publish components php artisan flux:publish
Requirements: Laravel 10+, Livewire 3.7+, Tailwind CSS 4.1+
Button
Prop Values / Example
variant outline (default), primary, filled, danger, ghost, subtle
size base (default), sm, xs
icon Leading icon: icon="plus"
icon:trailing Trailing icon: icon:trailing="chevron-down"
href Renders as anchor tag
loading Auto on wire:click/submit, disable with :loading="false"
Example: <flux:button variant="primary" icon="plus">Add</flux:button>
Input
Prop Values / Example
type text, email, password, date, file
label Auto-wraps in flux:field
description Help text below input
size sm, xs
clearable Shows clear button
copyable Shows copy button
viewable Password show/hide toggle
mask Input masking: mask="(999) 999-9999"
Example: <flux:input wire:model="email" label="Email" type="email" />
Select
Prop Values / Example
variant default (native), listbox, combobox
searchable Adds search input (listbox/combobox)
multiple Multi-select (listbox only)
clearable Shows clear button
:filter="false" Server-side filtering
Listbox: <flux:select variant="listbox" searchable multiple>
Checkbox & Radio
Prop Values / Example
variant default, segmented, cardsPRO, pillsPRO, buttonsPRO
label Label text next to control
description Help text below label
value Value in group selection
checked Default checked state
Group: <flux:radio.group wire:model="plan"><flux:radio value="basic" /></flux:radio.group>
Switch
Prop Values / Example
wire:model Binds to Livewire property
label Label text (wraps in flux:field)
description Help text
align right/start (default), left/end
Example: <flux:switch wire:model.live="notifications" label="Notify" />
Textarea
Prop Values / Example
rows Number of lines, or "auto" for auto-sizing
resize vertical (default), horizontal, both, none
label Label text
Modal
Prop Values / Example
name Unique identifier for triggering
variant default, floating, bare
flyout Opens as side panel
position Flyout: right (default), left, bottom
dismissible Click outside to close (default: true)
Open: PHP: Flux::modal('name')->show() | JS: $flux.modal('name').show()
Dropdown & Menu
Prop Values / Example
position top, right, bottom (default), left
align start (default), center, end
keep-open Prevent close on selection
Items: flux:menu.item, flux:menu.checkbox, flux:menu.radio, flux:menu.separator, flux:menu.submenu
Tabs
Prop Values / Example
variant default, segmented, pills
size base, sm
scrollable Enable horizontal scroll
name Tab identifier (on flux:tab)
Structure: flux:tab.group > flux:tabs > flux:tab + flux:tab.panel
Accordion
Prop Values / Example
exclusive Only one item open at a time
transition Enable smooth animation
expanded Default open state (on item)
heading Shorthand for heading text
TablePRO
Prop Values / Example
paginate Laravel paginator instance
sortable Enable sorting (on column)
sorted Currently sorted column
sticky Sticky headers/columns
Structure: flux:table > flux:table.columns > flux:table.column + flux:table.rows > flux:table.row > flux:table.cell
Date PickerPRO
Prop Values / Example
mode single (default), range
min / max Date boundaries (Y-m-d)
with-presets Show preset ranges
months Number of months shown
locale e.g., "ja-JP"
Format: Single: Y-m-d | Range: Y-m-d/Y-m-d | Use DateRange helper class
CalendarPRO
Prop Values / Example
multiple Select multiple dates
mode="range" Select date range
unavailable Comma-separated disabled dates
size xs, sm, lg, xl, 2xl
selectable-header Month/year dropdowns
Time PickerPRO
Prop Values / Example
time-format 12-hour, 24-hour, auto
interval Minutes between options (default: 30)
min / max Time boundaries, accepts "now"
multiple Select multiple times
ChartPRO
Component Purpose
flux:chart Container, accepts wire:model or :value
flux:chart.line Line chart (field prop for data key)
flux:chart.area Filled area chart
flux:chart.axis X/Y axis (axis, field, scale props)
flux:chart.tooltip Hover data display
Data: Array of assoc arrays: [['date' => '2025-01-01', 'value' => 100], ...]
EditorPRO
Prop Values / Example
toolbar Space-separated items: heading | bold italic | undo redo
Toolbar items: heading, bold, italic, strike, underline, bullet, ordered, blockquote, link, code, undo, redo. Use | for separator, ~ for spacer.
Command PalettePRO
Component Purpose
flux:command Container wrapper
flux:command.input Search input (clearable, closable)
flux:command.items Items container
flux:command.item Individual item (icon, kbd props)
Toast
Method Example
PHP Flux::toast('Message saved.');
JS $flux.toast('Message saved.')
Variant Flux::toast(variant: 'success', ...)
Variants: success, warning, danger | Position: "top end", "bottom center", etc.
Avatar
Prop Values / Example
src Image URL
name Generates initials automatically
size xs (24px), sm (32px), default (40px), lg (48px), xl (64px)
circle Circular avatar
color Tailwind colors, or "auto"
Badge
Prop Values / Example
color zinc, red, blue, green, etc. (18 colors)
size sm, default, lg
variant default, pill, solid
icon Leading icon
Tooltip & Popover
Prop Values / Example
content Tooltip text
position top (default), right, bottom, left
align center (default), start, end
toggleable Click-triggered (for touch)
Shorthand: <flux:button tooltip="Settings" icon="cog" />
Callout
Prop Values / Example
variant secondary (default), success, warning, danger
icon Icon name (e.g., "clock")
inline Display actions inline
Slots: actions, controls (for close button)
Icon
Prop Values / Example
Name syntax <flux:icon.bolt />
variant outline (24px), solid (24px), mini (20px), micro (16px)
Dynamic <flux:icon name="bolt" />
Loading <flux:icon.loading />
Source: Heroicons. Add Lucide: php artisan flux:icon
Heading & Text
Prop Values / Example
size (heading) base (14px), lg (16px), xl (24px)
level 1, 2, 3, 4 (HTML heading level)
size (text) sm, default, lg, xl
variant strong, subtle
Field & Error
Component Purpose
flux:field Wrapper for label + input + error
flux:label Field label (badge, trailing props)
flux:description Help text
flux:error Validation error (name prop required)
Auto-wrap: Adding label prop to input auto-wraps in field with error handling.
File UploadPRO
Component Purpose
flux:file-upload Container (multiple, wire:model)
flux:file-upload.dropzone Drag-drop zone (heading, text, with-progress)
flux:file-item Display uploaded file (heading, image, size)
KanbanPRO
Component Purpose
flux:kanban Main container
flux:kanban.column Column wrapper
flux:kanban.column.header Column title (heading, count, badge)
flux:kanban.card Card (heading, as="button")
OTP InputPRO
Prop Values / Example
length Number of input fields
mode numeric (default), alphanumeric, alpha
private Mask input values
submit="auto" Auto-submit when complete
PillboxPRO
Prop Values / Example
multiple Multi-select mode
searchable Add search input
variant default, combobox
Use: Multi-select with pills. <flux:pillbox.option value="tag">Tag</flux:pillbox.option>
Skeleton
Prop Values / Example
animate shimmer, pulse, none
size (line) base, lg
Components: flux:skeleton, flux:skeleton.line, flux:skeleton.group
SliderPRO
Prop Values / Example
range Enable range selection
min / max Slider boundaries
step Step increments
value Range: "20,80" | Bind array: [20, 80]
ComposerPRO
Prop Values / Example
rows Visible lines (default: 2)
max-rows Maximum expandable rows
submit "cmd+enter" (default), "enter"
inline Actions alongside input
Slots: header, footer, actionsLeading, actionsTrailing
Layout Components
Component Key Props Description
flux:header sticky, container Full-width top navigation bar. Contains brand, navbar, profile.
flux:sidebar sticky, collapsible (mobile/true/false) Vertical navigation. Contains sidebar.header, sidebar.item, sidebar.group.
flux:navbar - Horizontal nav links. Items: flux:navbar.item href="#" icon="home"
flux:navlist - Vertical nav for sidebars. Use flux:navlist.group heading="..." expandable
flux:brand logo, name, href Logo + company name display
flux:profile avatar, name, chevron User profile display for dropdowns
flux:main container Main content wrapper
Common Props Reference
Prop Used On Description
wire:model All form inputs Binds to Livewire property. Use wire:model.live for instant updates.
label Input, Select, etc. Auto-wraps in flux:field with label and error handling.
description Form fields Help text. Use description:trailing to place below input.
disabled All interactive Prevents user interaction.
invalid Form fields Applies error styling (red border).
icon Button, Input, etc. Leading icon. Use icon:trailing for end position. icon:variant for style.
size Most components Sizing: xs, sm, base (default), lg, xl
variant Most components Visual style variation (component-specific values).
Other Components
Component Key Props Description
flux:card size (sm) Container with border and padding for related content.
flux:separator vertical, text, variant (subtle) Visual divider. <flux:separator text="or" />
flux:breadcrumbs - Navigation trail. Items: flux:breadcrumbs.item href="#"
flux:paginationPRO :paginator Laravel paginator display. Works with paginate() and simplePaginate().
flux:autocompletePRO clearable, copyable Text suggestions. Use flux:autocomplete.item for options.
flux:context position, disabled Right-click context menu. Wraps trigger + flux:menu.
flux:spacer - Flexible space for layout (flex-grow). Use in headers/toolbars.
Livewire Integration Tips
Model binding: Use wire:model.live for instant updates, wire:model.blur for on-blur, wire:model.debounce.300ms for debouncing. Loading states: Buttons with wire:click auto-show loading indicator. Modal control: PHP: Flux::modal('name')->show() | Close: Flux::modal('name')->close() Toast from PHP: Flux::toast(heading: 'Success', text: 'Saved!', variant: 'success') Publishing: php artisan flux:publish button to customize specific components.