The Changelog
What's new around here?
Succinct and informative updates about Flux.
April 17, 2026
Color picker
Version ^2.14.0
Meet the new snazzy Color picker input. Good for theme settings, brand pickers, and anywhere your users need to choose a color.
Copy to clipboard
<flux:color-picker wire:model="theme" />Type or paste anything
The default trigger is a text input, and it's surprisingly forgiving about what you throw at it. Hex, RGB, HSL, with or without alpha, spaces, parens, missing # — it all just works:
Every format, alpha included
Use the format prop to pick your output. Alpha-aware formats automatically render an alpha slider in the popover:
Copy to clipboard
<flux:color-picker format="hex" /><flux:color-picker format="hexa" /><flux:color-picker format="rgb" /><flux:color-picker format="rgba" /><flux:color-picker format="hsl" /><flux:color-picker format="hsla" />Bring your own swatches
The default palette is 24 Tailwind colors, but swapping in your brand colors is a one-liner. Pass an array of hex values, or [value, label] pairs for accessible swatch labels:
Copy to clipboard
<flux:color-picker :swatches="['#ef4444', '#22c55e', '#3b82f6', '#f59e0b', '#a855f7']" /><flux:color-picker :swatches="[['#ef4444', 'Red'], ['#22c55e', 'Green'], ['#3b82f6', 'Blue']]" />Eye dropper support
Add the dropper prop and the picker gets a button that lets users sample a color from anywhere on their screen — a logo, a screenshot, another part of your app:
Copy to clipboard
<flux:color-picker dropper />Under the hood this uses the browser's EyeDropper API. In browsers that don't support it, the button is automatically disabled so nothing breaks.
Compose your own layout
One of our favorite parts: the popover is fully composable. Every element inside the picker is fully under your control.
Copy to clipboard
<flux:color-picker> <div class="flex flex-col gap-3"> <flux:color-picker.input placeholder="#000000" /> <flux:separator /> <flux:color-picker.area /> <flux:color-picker.slider channel="hue" /> </div></flux:color-picker>You get flux:color-picker.area, .slider, .input, .swatches, .swatch, and .dropper — mix and match to build a compact swatch-only picker, a canvas-only picker, or anything in between.
Accessibility
And of course, we went to great lengths to make sure this component honors expected keyboard navigation, focus behavior, and proper aria-labels so that screen readers can use it just as well.
March 1, 2026
Timeline
Version ^2.13.0
Flux's new Timeline component makes it easy to display a sequence of events or steps to your users. Check it out:
Copy to clipboard
<flux:timeline> <flux:timeline.item> <flux:timeline.indicator> <flux:icon.eye variant="micro" /> </flux:timeline.indicator> <flux:timeline.content> <flux:heading>curtisss <flux:text inline>requested a review</flux:text></flux:heading> </flux:timeline.content> </flux:timeline.item> <!-- ... --></flux:timeline>Each item has an indicator (icons, numbers, text — whatever you want) and a content area.
Vertical, horizontal, with status
Add horizontal to flip the layout. Combine it with the status prop (complete, current, incomplete) to show progress — connector lines between items update automatically:
Copy to clipboard
<flux:timeline horizontal> <flux:timeline.item status="complete">...</flux:timeline.item> <flux:timeline.item status="current">...</flux:timeline.item> <flux:timeline.item status="incomplete">...</flux:timeline.item></flux:timeline>Baseline alignment
One detail we're particularly proud of: because the timeline uses CSS grid, we can align indicators to the baseline of the adjacent text — not top (too high), not center (too low), but right on the text baseline. For SVG icons, we even render an invisible text element inside the indicator solely to establish a proper baseline. It's a small thing, but it makes a real difference.
Copy to clipboard
<flux:timeline align="baseline"> <!-- ... --></flux:timeline>Embed anything with blocks
Use flux:timeline.block to drop full-width content into the timeline — callouts, cards, comment threads. Blocks go full-bleed while regular items stay slightly inset, so embedded content feels like it truly belongs in the flow. Connector lines attach directly to the block edges, and flux:timeline.subgrid lets content inside a block snap to the outer timeline's columns using CSS subgrid — so avatars, text, and indicators all stay perfectly aligned.
Accessibility
And of course, we went to great lengths to make sure this component honors expected keyboard navigation, focus behavior, and proper aria-labels so that screen readers can use it just as well.
February 27, 2026
Progress bar
Version ^2.13.0
Meet the new Progress component — a simple, flexible progress bar for showing completion, upload status, or any value-over-max scenario in your app.
Copy to clipboard
<flux:progress value="75" />By default, the max is 100 and the bar uses your app's accent color. Let's take a look at what else it can do.
Custom max values
Not everything is a percentage. Use the max prop for custom scales — steps in a wizard, files in a batch, levels in a game, whatever:
Copy to clipboard
<flux:progress value="3" max="7" />Color and height
Override the fill color with the color prop, and adjust the height with a Tailwind class:
Copy to clipboard
<flux:progress value="75" color="purple" /><flux:progress value="75" class="h-3" />Dynamic binding
Bind the progress value to a Livewire property using wire:model so it updates in real-time:
Copy to clipboard
<flux:progress wire:model="progress" />This is perfect for long-running tasks like file uploads, data imports, or background jobs where you want to reflect server-side progress as it happens.
Accessibility
And of course, we went to great lengths to make sure this component honors expected keyboard navigation, focus behavior, and proper ARIA attributes so that screen readers can communicate progress status just as well.