The Changelog
What's new around here?
Succinct and informative updates about Flux.
February 17, 2025
Flux 2 is here
Version ^2.x
What started as a curiosity—building a date picker from scratch—turned into months of focused work dreaming and building the next version of Flux. Complete with date pickers, calendars, charts, and more.
Today, we're proud to release: Flux v2
Flux v2 brings powerful new components while staying lean and dependency-free. This release includes:
- A lightweight date picker & calendar
- Line & area charts for analytics
- Full Tailwind 4 support
- A free tier with essential UI components
- Laravel starter kits for instant productivity
Let's go.
Zero added dependencies
Keeping Flux lightweight was a top priority. Instead of pulling in third-party date pickers and charts, we built our own from the ground up—resulting in only 13kb added to the bundle.
Why go through all that trouble for a few extra kilobytes?
While exploring third-party charting and date picker libraries, we kept running into the following:
- Too much complex configuration
- Difficulty styling to match our designs
- Lack of accessibility & localization
With that, we decided to roll up our sleeves and build it all ourselves. And we're glad we did, because now we have the exact components we want for our use cases and nothing more. On top of that, when we encounter things we'd like added or modified in the future, we can just make it happen. No plugins, no pull requests, just changing our own code.
The date picker
Date pickers are everywhere—but most libraries are bloated and hard to style. With Flux v2, adding a sleek, fully accessible date picker is as simple as:
Copy to clipboard
Of course, like any component in Flux, we went the extra mile to make sure this component is:
- Mobile Friendly
- Keyboard accessible
- Internationalized
A calendar component
Date pickers are great, but sometimes you may want to embed the calendar itself on the page to allow users to choose a date for something like an appointment. We've seen this pattern a lot on sites like Shopify and AirBnB.
With our dedicated Calendar component you can now allow users to choose dates without hiding the calendar inside a dropdown:
Copy to clipboard
The date range picker
Date range pickers are an essential part of any analytics or booking interface. Therefore we didn't hold back when building ours.
You can simply add
mode="range"
to any date picker or calendar to support ranges, or you can go all out with presets, input fields, and plenty more options:
Copy to clipboard
Charts
Just like the date picker, a charting library is something we never thought we'd build from scratch...but once we started playing around, we started seeing a vision for how we could do charting differently and had to see it through.
They’re Just SVGs
This library is unique in that it makes you feel like you’re simply building and styling an SVG yourself.
This means the syntax for building a chart is slightly more verbose than other Flux components, but the experience is incredible—you won’t feel like you’re learning a mountain of complex configuration schemas. Instead, it’ll feel like you’re just tinkering with some
<div>
s and Tailwind classes.To demonstrate, take a look at the following "Sparkline" chart in Flux:
Here is the markup required to create the above chart:
Copy to clipboard
The above snippet renders, essentially, the following HTML:
Copy to clipboard
As you can see, each chart component maps directly to an HTML or SVG element. This means have FULL control over how your chart looks and how it's rendered.
Of course you can copy and paste our charting examples from the docs if you just want to get up and running, but after becoming familiar with the API, you'll have full control to do whatever you want.
Composable
One of my favorite things about this charting tool is its composability. You can mix and match different chart components to create exactly what your app demands.
For example, consider the following code:
Copy to clipboard
Rendering order is intuitive—just like stacking divs. Whatever appears last will be drawn on top.
Because most of our chart components are actually rendering SVG markup, you can control things intuitively that would have otherwise been an entirely separate configuration item.
Tailwind 4
Tailwind 4 simplifies configuration by allowing customization directly in CSS. Flux takes advantage of this to include its own styles and default configuration effortlessly:
Copy to clipboard
This feels much lighter and cleaner to us than the previous approach in Flux v1: A
@fluxStyles
directive along with additional configuration in tailwind.config.js
.Of course, there are heaps of other goodies in Tailwind 4 that compelled us to switch.
One teeny tiny example is not needing square brackets when styling elements based on data attributes (a pattern we use A LOT):
Copy to clipboard
Improved dark mode control
For dark mode to work in Flux, a
.dark
class needs to be added and removed from your app's <html>
element.Rather than doing this yourself in v1, Flux handled this automatically for you.
However, we've heard from users that, although that's nice most of the time, sometimes you want full control over your dark mode setup.
Therefore, in v2, we've removed our automatic handling of dark mode in favor of a new dedicated attribute called
@fluxAppearance
:
Copy to clipboard
Now, you can easily disable dark mode in your app entirely by simply not including this directive.
Or, if you want to control the
.dark
class based on something like server-side database code, you can do so yourself freely as well.Laravel starter kits + new free tier
Flux is now officially part of Laravel’s new starter kits launching next week!
To make this possible, we've beefed up our free tier by including all the essentials you need in a basic web app. Things like buttons, modals, dropdowns, form inputs, etc.
The rest of Flux's more advanced and capable components will be separated out into a dedicated Pro tier.
Of course, all previous purchases will be grandfathered into the pro tier.
Livewire has always been an incredibly productive way to write web apps, but the front-end component landscape just wasn't up to par. Flux has been our mission to resolve this disparity, and now with Flux 2 we feel like the foundation is set.
And we’re just getting started—tons of new components and templates are coming soon. Stay tuned!
-Caleb
December 17, 2024
Theming in Flux
Version ^1.1.0
Don't want your Flux app looking like everybody else's? We've got you covered. Flux is now completely themeable!
Three colors, one accent
In a perfect world, you could pick a single accent color to theme your entire app. Unfortunately, we found this to be a pipe dream. Instead, we've learned you need no fewer than three accent colors in a system that can support every hue:
- The base accent color. Used for things like the primary button background
- A foreground color. This sits on-top of the base accent color; often used in text.
- A content color. A stronger variant of the accent color for thinner figures like text.
We can then tweak those colors using opacity or
color-mix()
for specific needs, but those are the three core colors to work off of.Hand picked colors
We've curated themes for every color in the Tailwind color palette. Each combination is hand selected to make sure it looks just right.
For example, we chose a dark foreground color, instead of white, when an accent color like yellow is too light to meet color contrast standards.
Dark mode
Of course each theme has dark mode baked in, but this is not your mother's dark mode.
There are plenty of places where we went a completely different route stylistically to make sure all designs "feel" the same in both light and dark mode.
One example is when you hover over a radio card in light mode, the background and border are set to a subtle hue of your accent color, however, in dark mode, the card is just a lighter shade of gray.
This is because when you add color to an element in light mode it looks lighter and therefore closer to the user. But when you add color to an element in dark mode, it looks DARKER, and therefore further from the user and more blended with the background. In these cases, we've mixed the color with extra white—using transparency—or left the color out completely.
Opt-out
Some components are themed by default that you may want to render as a base color instead.
In these cases, we've added an
accent
prop that you can use to opt-out of the themed version.Here's an example of rendering a link in black/white instead of your accent color:
Copy to clipboard
Choose your gray
Flux ships with zinc as its gray hue of choice. This looks clean and modern with its black and white design, however, it's not always the best choice for other accent colors.
We've pre-selected which gray colors look best in combination with certain accent colors. You can simply select an accent color in the theme builder, and we will adapt the gray to match.
Of course, you can also choose your own gray if you have a different preference.
CSS Variables
Copy to clipboard
We are using CSS variables for all accent colors so they can be easily customized in any way you please.
We've also chosen variable names that adhere to Tailwind 4's naming convention. This way, in Tailwind 4, you won't need to add any configuration to use them in your utilities like
bg-accent
.You'll also notice these variables are adaptive, meaning they will change their values automatically in dark mode so that you don't have to do things like:
bg-accent dark:bg-accent-dark
.Tailwind 4, here we come
With Tailwind 4 right around the corner, we wanted to make sure we taking advantage of all the goodness it has to offer as well as using conventions like the aforementioned variable names.
Tailwind 4 uses a more modern color space for its color palette called oklab instead of the standard srgb (hsa(), rgb(), etc.) that you're used to.
Here is the difference between
bg-red-500
in Tailwind 3 vs Tailwind 4:
Copy to clipboard
This unlocks an entire new level of color (on modern monitors) that we were previously unable to render.
Therefore, you'll notice all colors in Flux themes are more vibrant than anything you would have seen in Tailwind 3.
In the interim, we've copied every CSS color variable to Flux from Tailwind 4's public beta. When Tailwind 4 is released, we'll be able to drop these and just use the ones Tailwind ships with.
We've spent countless hours researching and experimenting with everything theme related and are very happy with where we've landed. We hope you are too.
December 12, 2024
Dark mode controls
Version ^1.0.30
Flux has always supported dark mode in the sense that when your system appearance changes, Flux adapts.
However, there's a big gap between that kind of dark mode support, and providing controls to fully control dark mode for a site independently of system preferences.
Before we get into the details, just take a look at how simple it is now to create a dark mode switcher like the one shown above. Here is the exact code that was used for that switcher:
Copy to clipboard
Here's another code snippet to make an even simpler toggle button:
Copy to clipboard
New JavaScript APIs
As you might have noticed in the code snippets above, Flux now ships with a magic
$flux
object available to you inside Alpine expressions.There are two dark-mode related affordances on this magic object:
.dark
and .appearance
.You can get/set the dark state of an app using the
$flux.dark
boolean property. You can also get/set the theme preference for an app using the $flux.appearance
property (which will be one of three values: light
, dark
, and system
).Given these two simple properties, you should be able to accomplish any type of dark mode control widget you'd like. For example, a dark mode select, a dropdown menu, a toggle button, a toggle switch, radio groups, cards, or segmented radios. The sky's the limit.
If you need control from outside of Alpine, we've also shipped a global Flux object on the window called
window.Flux
.Now, you can do something like this:
Copy to clipboard
What's going on under the hood?
Out of the box, Flux will add/remove a
.dark
class to the <body>
element of your page.This means you can easily configure Tailwind to honor this class instead of the system preference using Tailwind configuration like so:
Copy to clipboard
Flux takes care of all the tricky bits like storing the user appearance preference in local storage to persist that choice between page loads.
We are also listening for system preference changes at run-time so that we can adapt the site without waiting for a new page load.
Doing these things yourself is not rocket science, but it certainly is more complicated than you want it to be. Enjoy.
November 24, 2024
Rich text editor
Version ^1.0.27
Welp, we did it. As of today, Flux now ships with a rich text editor 🎉.
Just slap this one-liner anywhere in your app and you're off and editing:
Copy to clipboard
We really sweat the details on this one and hope it shows.
Configurable toolbar
Copy to clipboard
To configure an editor's toolbar items, you can pass a custom arrangement into the
toolbar
prop as a string of item names mixed with separators (|
) and spacers (~
).Because each of these items is a simple Blade component inside Flux, you can easily create your own Blade components and reference them by name inside the
toolbar
prop.Custom toolbar items
If you want complete control over the toolbar, you can compose your own editor by assembling the Blade components yourself.
Here's an example of adding a custom dropdown menu to an editor's toolbar:
Copy to clipboard
As you can see, this is just Blade/HTML like any other component. You can style and assemble any other Flux components you like into the editor's toolbar.
Mouse optional
The editor's toolbar uses a roving tabindex so that you don't have to tab through every toolbar item as you tab along the page. The toolbar acts as a single tab stop that you can navigate using the arrow keys.
You can navigate sub menus within the toolbar using only your keyboard as well.
In fact, you can operate everything about this editor, easily, without ever touching your mouse.
Markdown syntax
Although this is a rich text editor, it supports Markdown syntax as a convenient way to control styling in your document as you edit.
Shortcuts
All the standard keyboard shortcuts you're familiar with from other editors like Google Docs are available to use as well.
Here are a few examples:
-
Cmd+BBold
-
Cmd+IItalic
-
Cmd+KInsert link
As a form field
Copy to clipboard
We wanted this component to feel no different than a textarea field when using it inside a form.
This means tackling things like disabled and invalid states at both the field AND fieldset level, associating labels/descriptions with the editor, as well as focusing the editor when the field label is clicked.
Screen readers
As you can see by the figure above, we worked hard to make sure the editor's accessibility tree was as descriptive and functional as possible.
Screen readers can easily discover and use all features inside the editor. This includes the tricky bits like toolbar sub-selects, tooltips, and insert-link popovers.
Dynamic JS bundle
Currently, every bit of Flux's JavaScript is contained inside a
21.5KB
file.Because of the enormity of a rich text editor and its dependancies, this component would add a whopping
85.3KB
to the the Flux bundle size.The problem is that many pages in an app don't use a rich-text editor at all and it doesn't make sense to penalize them with a bigger bundle.
Therefore, we included the editor's JavaScript as a separate bundle that gets loaded in parallel on an as-needed basis. The editor's JS will only be included at the exact moment it's needed to keep everything else in your app feeling light and snappy. This includes edge cases like lazy-loading an editor long after a page has already been loaded.
Localization
All of the english copy used in this component is translatable by copying a predefined set of keys into your
lang/?.json
files.Built on Tiptap & ProseMirror
Rather than wrapping a more batteries-included editor like Quill or TinyMCE, we opted to use Tiptap under the hood for the editor's core functionality.
Tiptap is a convenience wrapper around the extremely powerful ProseMirror project.
It's completely headless, meaning we have full control over all of the markup, visuals, and accessibility, without having to be responsible for the input/formatting interactions.
This means we can make the toolbar as customizable as everything else in Flux because we own all the HTML/CSS/JS for it.
Also, to help support and thank the ProseMirror project, we donated $1000 via their GitHub sponsors profile.
The future
For launch our goal was: a rock-solid editor that feels just as good to develop and use as any other component in Flux.
Now that we've accomplished that, we can start adding next-level features like image support and @mentions.
Stay tuned!
November 13, 2024
Multi-selects
Version ^1.0.23
We held off on releasing multi-selects at launch because we felt like there were too many decisions to get right, but here we are. In Flux version 1.0.23 and above, you are now able to pass the
multiple
prop and turn a single-select into a multi-select:
Copy to clipboard
Of course, data binding works as you'd expect, by passing the name of a Livewire property into
wire:model
, Livewire will keep the state of that property in sync with your selections:
Copy to clipboard
Copy to clipboard
We have big plans for the future of multi-select, like adding new variants for selecting pills, tags, avatars, etc., but for now, this is a good start.
Custom selected suffix
After your first selection, Flux shows the number of items selected, followed by the word "selected".
If you want to customize this to make it more contextual, you can do so using the
selected-suffix
prop:
Copy to clipboard
Checkbox indicator
The default check mark icon is now configurable for multi-selects. If you want a checkbox visual indicator instead, you can use the new
indicator
prop:
Copy to clipboard
- Support for multi-selects
- Dispatch input events when select listbox clearable button is clicked so that wire:model.live picks up the change
November 3, 2024
Custom icon sets, file inputs, click outside modals, & more
Version ^1.0.20
Flux ships with the entire Heroicons icon set by default. As with anything the Tailwind folks do, it's excellent.
However, at ~400 icons, it's more limited than other alternatives.
If there's an icon in your project that you need but isn't available in Heroicons, it's probably available in Lucide.
In version v1.0.20 of Flux, we've shipped a new command to easily import individual Lucide icons into your project:
Copy to clipboard
You will be prompted to enter the names of any icons you want, and it will import them locally into your project and format them as Blade components ready to use with Flux.
If Lucide doesn't have what you need still, you can just add your icons manually to the following directory in your project:
Copy to clipboard
Custom file input
The browser's default file input element is unstylable and frankly, looks outdated.
We've added our own simple wrapper around the native file input and exposed it through
type="file"
on the input component:
Copy to clipboard
Of course, we made sure our wrapper works just as well with both the keyboard, mouse, and screen readers as the native input does.
Closing modals by clicking outside
Flux uses the browser's new(ish)
<dialog>
element for its modals. There tons of benefits to this, but also a few quirks. One of them being, the <dialog>
element doesn't respond to clicking outside to close a modal; only the escape key or a close button.With a sprinkle of custom JavaScript, it was fairly trivial to implement this behavior in Flux. Now, by default, all
<flux:modal>
components will close on click outside.Clearable inputs and selects
Another small improvement we made in this release was making any searchable input in Flux show a clear button when filled.
We've also made this configurable for inputs that don't show one by default:
Copy to clipboard
- Add flux:icon command to import third-party icons from Lucide for icons Heroicons is missing
- Support clearable buttons on listbox, searchable input, and command input
- Swap deprecated 'color-adjust' CSS property for 'print-color-adjust'
- Fix profile name not being truncated in sidebar layout
- Fix wire:model bugs on checkbox, radios, and switches due to errant input/change events being fired
- Fix dynamic-component bug where attributes are double escaped
- Fix checkbox group using an initial value of null
- Preserve selected display event when selected option element is removed
- Support closing modals by clicking outside
- Add custom file input component
October 31, 2024
Radio cards have landed
Version ^1.0.19
You know those big boxy toggle thingy's you use to configure your new laptop purchase? Yep, those are radio cards; simple, bordered boxes that behave like radio buttons—meaning only one can be selected at a time.
Welp, we've got em' in Flux now, and using them is as simple as adding
variant="cards"
to a radio group:
Copy to clipboard
By default, the cards will be laid out horizontally, but you can easily control this using simple flex box utilities like
.flex-col
. This makes it really easy to change the layout on mobile with a responsive utility like .max-sm:flex-col
:
Copy to clipboard
Adding a cube icon to a card is as simple as passing an
icon="cube"
prop:
Copy to clipboard
If you want cleaner looking cards, you can remove the radio indicator by passing
:indicator="false"
into the radio group.
Copy to clipboard
For most cases, this level of customization is enough, but still, there might be times where you need full control over the contents of each card.
If that's the case, you can compose these radio cards your self with the full-form syntax:
Copy to clipboard
Although less common, there might be times you want the appearance of cards, but the behavior of checkboxes. Flux also supports
variant="cards"
for checkboxes:
Copy to clipboard
Of course, all of the aforementioned properties and customizations are available to checkbox cards as well.
While we were adding new radio variants, we decided to add another commonly requested one: Segmented radio buttons.
Just like cards, you can use segmented buttons with the
variant="segmented"
prop:
Copy to clipboard
Creating radio and checkbox variants like these is much more than just visuals. Each of these is fully controllable with a keyboard, uses a roving-tabindex to mimic the focus behavior of native checkboxes and radio buttons, and supports the proper attributes and roles so that screenreaders recognize these as standard form controls.
These are among the many details that differentiate Flux among other component libraries. We care deeply about providing world-class UI components that look amazing in the browser, feel amazing in your editor, and are accessible to as many people as possible.
- Add radio cards variant
- Add checkbox cards variant
- Add segmented radio group variant
- Change to solid icons for segmented tabs and radios
- Add two pixel focus outline offset to radio, checkbox, and switch to match native outlines
- Sortable column backgrounds were getting cut off on mobile
- Translate "No results found" strings in combobox and listbox
-
:hrefproperties were being escaped, causing links with ampersands to be malformed
-
Support as="div"to render a button as a div
October 21, 2024
Customize navigation badge colors
You can now customize the color of navigation badges using the
badge-color
property:
Copy to clipboard
Modal close listeners
You can now run any Livewire action when a Flux modal closes for any reason—escape, cancel, close button, etc.
Copy to clipboard
Fuzzier searchable selects
All searchable inputs in Flux—searchable selects, comboboxes, command palettes—will now use JavaScript
.includes(...)
instead of .startsWith(...)
when matching results so that searches are more inclusive.This behavior mirrors the browser's native autocomplete behavior for the
<datalist>
element.
-
Support @closelisteners on modal component
-
Add badge-colorproperty to navlist and navbar
-
Use .includes()instead of.startsWith()for autocomplete/combobox/command search
- Fix listbox/combobox not showing newly selected option if added dynamically
- Make accordion heading text full-width
- Silence error when non-valid colors are passed to badge component
- Prevent radio/checkbox group labels from being grayed out if individual controls are disabled
- Expose slots for select button and input in listbox/combobox
-
Make select full-width and forward classes to the <ui-selected>element instead of the<button>element
- Polyfill the popover attribute for Safari 16 and lower
- Provide fallbacks for unsupported CSS in older browsers
- Disable modal triggering on disabled buttons
October 14, 2024
Toasts just got better
Version ^1.0.10
Flux's Toast component just got a heap of improvements based on a mixture of your feedback and our intuition.
Making them stand-out
First, we increased the drop-shadow to make Toasts appear as if they are in the foreground of the page.
We also increased the slide-up animation duration so that the motion of the Toast more easily catches the user's eye.
Adding variants
You can now add additional context to your Toast messages using one of three new variants: success, danger, and warning.
Variants can be used by passing the
variant
parameter to Flux::toast()
like so:
Copy to clipboard
Positioning
You can now specify where on the page you want your toasts to appear by passing the
position
prop to <flux:toast />
:
Copy to clipboard
If you have a header navbar at the top of your app, you may want to add extra padding using Tailwind:
Copy to clipboard
Flux automatically adjusts animations based on position. Toasts positioned at the top will slide-in from the side, while Toasts on the bottom will slide up from the bottom.
Persisting toasts between redirects
A common pattern in applications is to trigger a toast before redirecting your users elsewhere:
Copy to clipboard
If you wish to preserve your toasts between page visits, you can do so using the
@persist
Blade directive in your layout:
Copy to clipboard
Now, If you trigger a toast before a redirect, it will remain on the page after the redirect.
This behavior was previously broken because of the way Browsers handle popovers between pages, however we introduced a patch in Livewire version 3.5.10 to allow for this.