The Changelog
What's new around here?
Succinct and informative updates about Flux.
August 9, 2026
Richer select options
Version ^2.16.0
We've made a bunch of improvements to Select. Options can now have icons, descriptions, and avatars, and the dropdown itself can be positioned, aligned, and sized independently from the trigger.
Let's take a look.
Icons and descriptions
Add an icon to make options easier to scan, or a description when a label needs a little more context. You can use either on its own or combine them:
Copy to clipboard
<flux:select variant="listbox"> <flux:select.option value="public" label="Public" icon="globe-alt" /> <flux:select.option value="private" label="Private" description="Only invited users can access this." /></flux:select>Descriptions only appear while the dropdown is open, so the selected value stays nice and compact. Icons also support icon:variant and icon:class for further customization.
Avatars
For user pickers, pass an image URL to the new avatar prop:
Copy to clipboard
<flux:select variant="listbox" wire:model="assignee"> <flux:select.option value="caleb" label="Caleb Porzio" avatar="https://unavatar.io/github/calebporzio" /> <!-- ... --></flux:select>You can pass avatar:* props straight through to the underlying Avatar component when you need more control.
Select components are one of the hardest things to get right in a UI kit, and we're proud of how flexible and capable Flux's select has become!
August 8, 2026
Dot ticks for sliders
Version ^2.16.0
Flux sliders can now display dot ticks directly inside the track. They're handy for compact settings, ratings, and other controls with a small set of meaningful steps.
Copy to clipboard
<flux:slider tick:position="inside" min="1" max="5"> @foreach (range(1, 5) as $i) <flux:slider.tick :value="$i" variant="dot" /> @endforeach</flux:slider>The two new options are intentionally independent: tick:position="inside" controls where the slider renders its ticks, while variant="dot" controls how each tick looks.
That means you can mix and match them. Dot ticks can sit below the track, and regular line ticks can sit inside it. Custom tick labels continue to work below the slider as before.
Dots also inherit the slider's active state, so marks over the filled portion of the track automatically adjust their contrast as the value changes.
June 4, 2026
Carousel
Version ^2.15.0
Flux now ships with a Carousel component. Image galleries, testimonial rotators, product showcases, featured listings — whatever you need to scroll through, it's ready to go.
Let's take a look.
Snap and scroll
Drop in a flux:carousel with as many slides as you need. Each slide snaps into place naturally, and arrow controls appear automatically — they even hide themselves when you've reached either end:
Copy to clipboard
<flux:carousel> <flux:carousel.slide class="w-full"> <img src="/img/seascape.png" class="aspect-16/9 rounded-lg object-cover" /> </flux:carousel.slide> <flux:carousel.slide class="w-full"> <img src="/img/woodscape.png" class="aspect-16/9 rounded-lg object-cover" /> </flux:carousel.slide> <!-- ... --></flux:carousel>Slides can be any width — w-full for a single-slide gallery, w-1/3 for a multi-card layout, or responsive classes like w-4/5 sm:w-1/2 md:w-1/3 to adapt across breakpoints.
External controls
For layouts like featured listings or product rows, you probably don't want arrow buttons floating over your content. Use a shared name to place controls anywhere on the page:
Copy to clipboard
<div class="flex justify-between items-center mb-4"> <div> <flux:heading size="lg">Popular stays</flux:heading> <flux:text>Handpicked homes in beautiful places</flux:text> </div> <flux:carousel.controls name="popular-stays" /></div><flux:carousel name="popular-stays" :arrows="false"> <flux:carousel.slide class="w-4/5 sm:w-1/2 md:w-1/3"> <!-- ... --> </flux:carousel.slide></flux:carousel>The controls stay in sync — they disable at the edges just like the built-in arrows would.
Advance by page
By default, arrow controls move one slide. Set advance="page" to jump by however many slides are currently visible — much better for grids with lots of items:
Copy to clipboard
<flux:carousel advance="page"> <!-- ... --></flux:carousel>Indicators and autoplay
For simpler carousels like testimonials, swap arrows for dot indicators. Add autoplay and the slides advance on their own — pausing automatically on hover or focus:
Copy to clipboard
<flux:carousel indicators autoplay autoplay:interval="3500"> <!-- ... --></flux:carousel>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.