The Changelog
What's new around here?
Succinct and informative updates about Flux.
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.
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.