The Changelog
What's new around here?
Succinct and informative updates about Flux.
August 19, 2026
Horizontal charts
Version ^2.18.0
Flux charts now support horizontal layouts. Add the horizontal prop and Flux will place the chart's index on the Y axis and its values on the X axis.
Bars, groups, stacks, lines, areas, points, cursors, and tooltips all work the same way—just turned on their side.
One prop, same chart
Copy to clipboard
<flux:chart horizontal wire:model="data" class="aspect-[2/1]"> <flux:chart.svg> <flux:chart.bar field="accounts" class="text-blue-500" radius="4 0" /> <flux:chart.axis axis="y" field="team"> <flux:chart.axis.tick /> <flux:chart.axis.line /> </flux:chart.axis> <flux:chart.axis axis="x"> <flux:chart.axis.grid /> <flux:chart.axis.tick /> </flux:chart.axis> </flux:chart.svg></flux:chart>The category or time field moves to the Y axis, while the numeric scale moves to the X axis. Everything else stays composable, so existing bar, line, and area charts can use the same components and configuration.
Mix, group, and stack
Horizontal orientation works across the full chart system. You can group bars for side-by-side comparisons, stack them to show totals, mix positive and negative values around a zero line, or transpose a line and area chart without learning a separate API.
Build them visually
The chart builder now includes a Horizontal preset and an orientation control. Pick a layout, configure logical index and value axes, then copy the generated Blade markup into your project.
August 13, 2026
Imagine a user presses ⌘F to find some text on a page. The text is there, but it's tucked inside a closed accordion or an inactive tab.
Normally, they're out of luck. Because that content is hidden, the browser can't find it.
Modern browsers now have an answer: hidden="until-found". It keeps content visually hidden while making it discoverable by the browser's find-in-page feature. When a match is found, the browser reveals the content, scrolls to it, and highlights the result.
We wanted Flux components to ship with this behavior out of the box.
Accordions just work
Collapsed accordion content is findable by default. There's no prop to add and nothing to configure:
Copy to clipboard
<flux:accordion> <flux:accordion.item heading="Do I need to be home for delivery?"> Orders over $500 require a signature upon delivery. </flux:accordion.item></flux:accordion>When a match is found, Flux opens the associated item automatically.
Opt in for tabs
Tabs are opt-in because inactive tabs often represent separate views where this behavior may not be desirable. Add findable to the tab group when you want their content included in browser search:
Copy to clipboard
<flux:tab.group findable> <flux:tabs> <flux:tab name="profile">Profile</flux:tab> <flux:tab name="billing">Billing</flux:tab> </flux:tabs> <flux:tab.panel name="profile">...</flux:tab.panel> <flux:tab.panel name="billing">...</flux:tab.panel></flux:tab.group>When a match is found, Flux selects the associated tab automatically.
That's it. Another thing you never have to think about—Flux takes care of it using modern browser affordances.
Enjoy!
August 10, 2026
Toggle
Version ^2.17.0
Flux now ships with a Toggle component: a compact, button-shaped control for turning settings and modes on or off. It's included in the free component set.
Copy to clipboard
<flux:toggle wire:model.live="fastMode" icon="bolt" tooltip="Fast mode" />Tooltips for context
Icon-only controls need a clear name. Add the tooltip prop to give people context on hover and provide an accessible name for screen readers:
Copy to clipboard
<flux:toggle icon="bolt" tooltip="Fast mode" />Custom colors
When the toggle is off, it renders the outline version of your icon. Turn it on and the solid version takes its place in your app's accent color. Use the color prop to customize that active color without changing the control surface:
Copy to clipboard
<flux:toggle icon="bolt" color="blue" checked /><flux:toggle icon="heart" color="red" checked /><flux:toggle icon="bell" color="amber" checked />Adding text
Pair an icon with a short visible label when a setting benefits from persistent context. The text stays neutral while the icon carries the active state:
Copy to clipboard
<flux:toggle icon="heart" color="red" label="Favorite"></flux:toggle>Stateful icons and labels
Some toggles need to communicate more than a simple on or off value. Give each state a distinct icon and label so users can tell at a glance which one is active:
Copy to clipboard
<flux:toggle on:icon="speaker-wave" off:icon="speaker-x-mark" on:label="Sound on" off:label="Sound off"/>