The Changelog
What's new around here?
Succinct and informative updates about Flux.
September 30, 2025
File upload
Version ^2.5.0
Flux now ships with a complete File Upload component built for modern file handling. Drag and drop, progress tracking, file previews—it all works beautifully right out of the box.
Copy to clipboard
<flux:file-upload wire:model="photos" multiple> <flux:file-upload.dropzone heading="Drop files here or click to browse" text="JPG, PNG, GIF up to 10MB" /></flux:file-upload>Drag and drop
The file upload component handles drag and drop automatically. Users can drag files directly from their desktop, or click to browse—whatever they prefer. The component automatically provides visual feedback when files are dragged over using data attributes you can style with Tailwind's in-data-dragging: prefix.
Compact inline layout
For tighter spaces, add the inline prop to the dropzone for a horizontal layout that takes up less vertical room:
Copy to clipboard
<flux:file-upload.dropzone heading="Drop files or click to browse" text="JPG, PNG, GIF up to 10MB" inline/>Built-in progress tracking
Add the with-progress prop and the component shows real-time upload progress. No extra JavaScript needed—it's all handled for you.
Copy to clipboard
<flux:file-upload.dropzone heading="Drop files or click to browse" text="JPG, PNG, GIF up to 10MB" with-progress/>The component exposes CSS variables (--flux-file-upload-progress and --flux-file-upload-progress-as-string) so you can create custom progress indicators if you need them.
Completely customizable
The flux:file-upload wrapper handles all the complex functionality—drag and drop, file selection, upload progress—while letting you use any custom HTML you want for the appearance. This is perfect for things like custom avatar uploaders or specialized file inputs.
Copy to clipboard
<flux:file-upload wire:model="photo"> <!-- Your custom UI here --> <div class="..."> <flux:icon name="user" /> </div></flux:file-upload>The component provides data-dragging and data-loading attributes that you can target with Tailwind's utility prefixes for dynamic visual feedback.
Display uploaded files
The flux:file-item component displays uploaded files with automatic image previews, formatted file sizes, and action buttons. It handles all the details—file name display, size formatting (KB, MB, GB), and thumbnail generation.
Copy to clipboard
@foreach ($photos as $index => $photo) <flux:file-item :heading="$photo->getClientOriginalName()" :image="$photo->temporaryUrl()" :size="$photo->getSize()" > <x-slot name="actions"> <flux:file-item.remove wire:click="removePhoto({{ $index }})" /> </x-slot> </flux:file-item>@endforeachSeamless Livewire integration
Works perfectly with Livewire's file upload system. Just add wire:model and you're done—single files, multiple files, validation, temporary URLs, it all just works.
The documentation includes complete examples for both single and multiple file uploads with full Livewire component code.
Works as a native file input
The file upload component dispatches all the same events and has all the same properties as a native <input type="file"> element. This means you can likely use it with your favorite third-party library.
Accessibility built in
We made sure the file upload component works great on both mobile devices and screen readers. All interactive elements have proper ARIA labels, keyboard navigation works exactly as you'd expect, and focus management is handled automatically.
Check out the File Upload documentation for complete examples and API reference.
September 15, 2025
Pillbox
Version ^2.4.0
Introducing Pillbox, a select component that displays selected items as removable pills right inside the input area. Perfect for tagging systems, skill selectors, or any multi-select scenario where you want selected values to be front and center.
Unlike traditional multi-selects that hide selections in a dropdown, Pillbox shows everything at a glance with each selection becoming a removable pill that expands the input area as needed.
Copy to clipboard
<flux:pillbox wire:model="tags" multiple placeholder="Choose tags..."> <flux:pillbox.option value="design">Design</flux:pillbox.option> <flux:pillbox.option value="development">Development</flux:pillbox.option> <flux:pillbox.option value="marketing">Marketing</flux:pillbox.option></flux:pillbox>Search through options
Add the searchable prop to filter through large lists. The search input appears right in the dropdown, making it easy to find exactly what you're looking for.
Copy to clipboard
<flux:pillbox multiple searchable placeholder="Choose skills..."> <flux:pillbox.option value="javascript">JavaScript</flux:pillbox.option> <flux:pillbox.option value="typescript">TypeScript</flux:pillbox.option> <flux:pillbox.option value="php">PHP</flux:pillbox.option> <!-- ... --></flux:pillbox>The details
We built Pillbox to handle the real-world complexity of multi-select inputs:
Visual feedback: Each pill has its own remove button, making it clear how to deselect individual items. The input area expands naturally as you add more pills.
Accessible by default: Screen readers announce selected items, available options, and state changes. ARIA attributes are handled automatically.
Custom content: Options aren't limited to text. Add icons or custom HTML to make options more recognizable.
September 3, 2025
Collapsible sidebars
Version ^2.3.0
Flux's sidebar can now collapse on desktop to give your app more breathing room, while maintaining all the functionality users expect.
We've also rebuilt the entire sidebar component system from the ground up with semantic, purpose-built components that make building consistent sidebar layouts effortless.
Let's take a look.
Desktop collapsible behavior
The biggest change is the new collapsible prop that replaces the old stashable behavior. Don't worry—stashable is still supported for backwards compatibility, but we recommend migrating to collapsible for its improved flexibility. Now you can control exactly when and how your sidebar collapses:
Copy to clipboard
<flux:sidebar collapsible> <flux:sidebar.header> <flux:sidebar.brand logo="/logo.png" name="Acme Inc" /> <flux:sidebar.collapse /> </flux:sidebar.header> <flux:sidebar.nav> <flux:sidebar.item icon="home">Dashboard</flux:sidebar.item> <flux:sidebar.item icon="inbox" badge="3">Messages</flux:sidebar.item> </flux:sidebar.nav></flux:sidebar>When collapsed on desktop, the sidebar shrinks to an icon-only view that preserves all your navigation while maximizing screen real estate:
Users can hover over any navigation item to see its label as a tooltip, ensuring accessibility isn't compromised in the collapsed state.
Flexible collapsible options
The collapsible prop gives you precise control over when the sidebar can collapse:
- collapsible="mobile" - Only collapsible on mobile
- collapsible - Collapsible on both mobile and desktop
- No collapsible prop - Never collapsible (always visible)
Copy to clipboard
<!-- Only collapses on mobile --><flux:sidebar collapsible="mobile"> ...</flux:sidebar><!-- Collapses on both mobile and desktop --><flux:sidebar collapsible> ...</flux:sidebar>Configurable breakpoints
Want to customize when "mobile" vs "desktop" behavior kicks in? The new breakpoint prop accepts pixel values:
Copy to clipboard
<flux:sidebar collapsible breakpoint="768"> ...</flux:sidebar>This accepts integers (768), pixel strings ("768px"), or even rem values ("48rem").
Persistent user preferences
The sidebar automatically remembers collapse preferences across sessions, with separate states for mobile and desktop viewports. Users can collapse it on desktop, switch to mobile, and return to find their desktop preference preserved.
Set persist="false" if you want to disable this behavior:
Copy to clipboard
<flux:sidebar collapsible persist="false"> ...</flux:sidebar>All new component structure
We've rebuilt the sidebar with semantic components that make the structure clearer and more consistent:
Copy to clipboard
<flux:sidebar collapsible> <flux:sidebar.header> <flux:sidebar.brand logo="/logo.png" name="Acme Inc" /> <flux:sidebar.collapse /> </flux:sidebar.header> <flux:sidebar.search placeholder="Search..." /> <flux:sidebar.nav> <flux:sidebar.item icon="home" current>Dashboard</flux:sidebar.item> <flux:sidebar.item icon="users">Team</flux:sidebar.item> <flux:sidebar.group expandable heading="Projects"> <flux:sidebar.item>Website Redesign</flux:sidebar.item> <flux:sidebar.item>Mobile App</flux:sidebar.item> </flux:sidebar.group> </flux:sidebar.nav></flux:sidebar>Instead of generic components like flux:navlist.item, you now use purpose-built flux:sidebar.item components that understand their sidebar context and respond appropriately to collapsed states.
Accessibility considerations
We've made sure the collapsed sidebar maintains full keyboard navigation and screen reader support:
- All navigation items remain in the tab order
- Tooltips provide context for collapsed navigation items
- The collapse button includes proper ARIA labels
- Focus management works seamlessly between expanded and collapsed states
The new collapsible sidebar gives your applications the flexibility to adapt to different screen sizes and user preferences while maintaining a polished, accessible experience.