The Changelog
What's new around here?
Succinct and informative updates about Flux.
RSS feed
September 28, 2026
We've rebuilt Flux's Card to give your app beautifully aligned cards, with the spacing, surfaces, and corners already figured out.
We're proud of the details in this one. Buttons sit just right in headers, inner corners follow outer curves, and each layout gets its own carefully tuned spacing.
Compose a card from headers, bodies, and footers, and those details come with it:
Copy to clipboard
<flux:card body="inset" variant="soft"> <flux:card.header> <flux:card.heading>Notifications</flux:card.heading> <flux:card.subheading>Choose what you hear about</flux:card.subheading> </flux:card.header> <flux:card.body class="space-y-4"> <flux:switch label="Product updates" checked /> <flux:switch label="Weekly digest" /> </flux:card.body></flux:card>Every part is optional. Use only the pieces a card needs, or put content straight inside and it's padded evenly.
Surfaces
The variant prop gives you five surfaces. The default has a shadow in light mode and elevation in dark mode, while outline keeps the border without either. muted and soft offer quieter tints, and filled drops the border entirely. The tints adapt to the background underneath, with colors tuned for light and dark mode. Mix them freely without losing consistency.
Body treatments
The body prop changes how the parts meet. seamless keeps everything on one surface, divided adds lines, separated adds tinted bands, and inset or flush gives the body its own panel.
Each treatment has its own spacing for a reason. With no boundaries between parts, seamless cards can sit tighter. Dividers and panels need more room so nothing feels crammed.
Headers and corners
Small buttons in flux:card.actions hang into the header's padding, with equal space from the top and side edges. Their labels line up with the heading text without making the header taller. Bigger controls get the space they need, and actions placed before the heading move to the leading side.
Look at the profile card in the hero: its body is inset, with corners rounded concentrically to the card's, so the gap between the curves stays even all the way around.
Headers and footers also work on their own outside a card, or as sub-sections nested inside a body.
Sizes
Card comes in four sizes: xs, sm, md, and lg. Each has individually tuned padding, typography, corners, and gaps, from compact sidebar cards to roomy settings forms.
Bleed
Let images fill the body, right up to its rounded edges, while the footer keeps its own padding and room for actions. Wrap the image in flux:card.bleed and the card handles the fit. Tables have a bleed prop too: rows run edge to edge while their content stays aligned with the rest of the card.
We tuned every size, color, border, and line of text by hand, across each surface and body treatment. And since every card is built from the same few parts, your design holds together whether you're writing the markup yourself or an LLM is generating it. All those little decisions are now yours to reuse. 👌
Card is part of free Flux.
September 15, 2026
Flux now has a Phone input component, with a searchable country picker and automatic formatting for international phone numbers.
Copy to clipboard
<flux:phone wire:model="phone" country="US" label="Phone number" />The field displays a familiar local format, like (201) 555-0123, while the value bound to Livewire becomes +12015550123. That's E.164, the international format with a country calling code up front. Incomplete numbers stay as typed while someone is editing.
A country picker built in
The picker shows flags, country names, and calling codes. You can search for a country or paste an international number directly into the field, and Flux updates the selected country for you.
If most of your users are in a few countries, put those choices first:
Copy to clipboard
<flux:phone :country-order="['US', 'CA', 'GB', 'AU']" />You can also narrow the picker with countries. The usual Flux labels, descriptions, filled variant, and compact sizes work here too, so it fits alongside your other inputs.
Formatting doesn't replace validation. Validate submitted numbers on your server, including any country restrictions your app needs.
Phone input is available in Flux Pro v2.20.0.
September 15, 2026
We've added a new Account overview demo to Flux. It's a banking dashboard with an account balance, searchable transactions, a cash flow chart, and upcoming payments.
There are some nice details in the transaction list: merchant logos, category labels, pending badges, and green amounts for money coming in. The dark balance card gives the page a clear starting point, with the rest of the account details underneath.
You can search the transactions, hover the chart, and try the layout in light or dark mode. It adapts to smaller screens too.
To use it as a starting point, open Account overview on the demos page, switch to Code, and copy the source.