The Changelog
What's new around here?
Succinct and informative updates about Flux.
June 16, 2025
Popovers
Version ^2.2.0
Meet the new Popover component. It's a dropdown, but instead of the "menu" part, it's a generic <div> that you can do whatever you want with.
They're great for things like custom filters and hover cards.
Copy to clipboard
<flux:dropdown> <flux:button>...</flux:button> <flux:popover> <!-- Put whatever you want in here... --> </flux:popover></flux:dropdown>Hover to reveal
Want to show additional information when users hover over elements? Just add the hover prop and you're set. This is perfect for user profile previews, interactive tooltips, or any contextual information you want to reveal on hover.
All. The. Details.
As with every other component in Flux, we left no stone unturned and sweated every detail for this popver.
Programmatic control: Bind the open/closed state to a Livewire property for complete control over when the popover shows and hides.
Copy to clipboard
<flux:dropdown wire:model="showProfile"> <flux:button>Profile</flux:button> <flux:popover>...</flux:popover></flux:dropdown>Accessibility by default: ARIA attributes like aria-expanded are automatically managed for you. Screen readers get all the context they need about the popover's state and relationship to its trigger.
Native browser behavior: Because we use the native popover attribute under the hood, you get all the goodness that comes with it—Escape to close, Enter to open, proper tab order, and the popover will automatically close when you tab away from it.
Anchor positioning: The popover intelligently positions itself next to the trigger element. You can fine-tune everything with offset, gap, position, and align props.
Smart edge detection: If the popover would open too close to the bottom of the screen, it flips to show above instead; same for left/right edges.
Overflow handling: When there's not enough room to show the full popover content, it becomes scrollable automatically so nothing gets cut off. Your users can always access everything inside.
All of this complexity is completely hidden from you as the developer. Just drop in the component and it works beautifully everywhere.
Check out the Popover documentation for more examples and detailed API reference.
June 16, 2025
Pills & button selectors
Version ^2.2.0
We've added two new variants to the radio and checkbox components: pills and buttons.
These variants work with both radio groups and checkbox groups, giving you compact alternatives that fit perfectly in filters, toolbars, and anywhere you want a more streamlined look.
Pills
Pills are compact, rounded buttons that look like…well…pills! They're perfect for laying out selectable options in a way that doesn't dominate the UI.
Copy to clipboard
<flux:checkbox.group variant="pills" label="Categories"> <flux:checkbox value="fantasy" label="Fantasy" /> <flux:checkbox value="science-fiction" label="Science fiction" /> <flux:checkbox value="horror" label="Horror" /> <!-- ... --></flux:checkbox.group>Of course, pills work just as well with the radio.group component if you only want them to be single-select.
Selectable buttons
The buttons variant gives you toolbar-style options that look more prominent and actionable. Perfect for feature toggles and grouped controls:
Copy to clipboard
<flux:radio.group variant="buttons" label="Feedback type"> <flux:radio icon="bug-ant">Bug report</flux:radio> <flux:radio icon="light-bulb">Suggestion</flux:radio> <flux:radio icon="question-mark-circle">Question</flux:radio></flux:radio.group>Like all Flux components, these variants are fully keyboard accessible with proper focus management and screen reader support. The pills flow nicely and wrap to new lines when needed, while the buttons maintain consistent sizing and alignment.
Both variants support all the same props as the standard radio and checkbox components—icons, disabled states, and more.
March 25, 2025
Avatars
Version ^2.1.0
We've added a new Avatar component to Flux UI. It's a small, but important, piece of UI that we held off on until we could give it the attention it deserves. Let's take a look.
Adding an avatar to your app is straightforward:
Copy to clipboard
<flux:avatar src="https://unavatar.io/x/calebporzio" />Fallbacks
Not everyone has a profile picture, so we wanted to make sure the alternatives still look good.
When no image is provided, the avatar component will use the name to generate initials:
Copy to clipboard
<!-- Generates "CP" from the name --><flux:avatar name="Caleb Porzio" /><!-- Or control exactly what shows --><flux:avatar initials="Ca" /><!-- Even show just a single initial --><flux:avatar name="Caleb Porzio" initials:single />Colors
We added some sensible color options, including an auto-color feature that gives users a consistent identity.
Copy to clipboard
<!-- Choose from 17 preset colors --><flux:avatar name="Caleb Porzio" color="indigo" /><!-- Or let Flux deterministically generate a color --><flux:avatar name="Caleb Porzio" color="auto" /><!-- Provide a seed for consistent colors --><flux:avatar name="Caleb Porzio" color="auto" color:seed="{{ $user->id }}" />The color="auto" option creates a color based on the name, so the same user gets the same color consistently. A small detail that helps with visual recognition.
Badges
Add status indicators or notifications:
Copy to clipboard
<!-- Simple notification dot --><flux:avatar badge badge:color="green" src="https://unavatar.io/x/calebporzio" /><!-- Notification count --><flux:avatar badge="25" src="https://unavatar.io/x/calebporzio" /><!-- Custom badge content --><flux:avatar src="https://unavatar.io/x/calebporzio"> <x-slot:badge> <img class="size-3" src="https://unavatar.io/github/hugosaintemarie" /> </x-slot:badge></flux:avatar>Groups
Group avatars together to save on horizontal space when needed:
Copy to clipboard
<flux:avatar.group> <flux:avatar src="https://unavatar.io/x/calebporzio" /> <flux:avatar src="https://unavatar.io/x/taylorotwell" /> <flux:avatar src="https://unavatar.io/x/jeffrey_way" /> <flux:avatar>3+</flux:avatar></flux:avatar.group>Or use them in tables, dropdowns, and other UI elements:
Check out the Avatar documentation for more examples and detailed API reference.