Changelog

TailwindCSS 4 and Phoenix 1.8 Support

Excited to announce Fluxon v1.1! This release brings full compatibility with TailwindCSS 4 and Phoenix 1.8, along with updated installation instructions and improved ways to handle component conflicts. Plus, there are some cool new dashboards to check out.

TailwindCSS 4 and Phoenix 1.8 Support

All Fluxon components have been revised and updated to work seamlessly with TailwindCSS 4, which comes bundled with Phoenix 1.8. This means you can use Fluxon in your latest Phoenix projects without compatibility worries or extra configuration steps.

While this update primarily focuses on TailwindCSS 4 compatibility, it works perfectly with Phoenix 1.7 as well, provided you've updated to TailwindCSS 4. The key requirement is TailwindCSS 4, not necessarily Phoenix 1.8.

Updated Installation Process

TailwindCSS 4 changed how it processes classes, so the installation process has changed too. Instead of configuring tailwind.config.js, you'll now add Fluxon to your app.css file using the new @source directive:

@import "tailwindcss" source(none);
@source "../css";
@source "../js";
@source "../../lib/phx_app_web";
@source "../../deps/fluxon/**/*.*ex";

This approach aligns with TailwindCSS 4's source file detection and ensures all Fluxon component classes are properly processed. For complete setup instructions, check out the installation guide.

Improved Component Conflict Resolution

The skip_conflicts: true option when importing Fluxon has been deprecated. Now you can use the more explicit only and except options for better control over component imports:

# Import all Fluxon components except those that conflict with CoreComponents
use Fluxon, except: [:button, :error, :input, :table]

# Or import only specific Fluxon components
use Fluxon, only: [:dropdown, :modal, :sheet]

This gives you precise control over which components you want to use and helps avoid conflicts with Phoenix's CoreComponents more effectively.

New Dashboard Templates

This release also includes two new dashboard layouts that showcase Fluxon components working together. These templates provide an excellent starting point for new projects and demonstrate how to combine various Fluxon elements into cohesive, functional interfaces.

Date Picker, Autocomplete, and Documentation

After months of work, I'm excited to release the biggest Fluxon UI update since the initial release. This version introduces two major new components: Date Picker and Autocomplete, along with documentation for all components.

Date Picker Component

By far the most complex component in the Fluxon UI catalog, and I dare there will be another more complex than that in the future.

Although it's the same component under the hood, the Date Picker component comes in three variations:

• Date Picker: For selecting single and multiple dates
• Date Time Picker: For selecting single date and time
• Date Range Picker: For selecting date ranges

The biggest highlight here is that the component was built all from scratch. You read it right, that sounds crazy, but trying to use any existing datepicker library out there would eventually lead to similar or maybe even more work in the end, not to mention it would add a new dependency, bigger bundle size and more. Doing it from scratch allowed me to have full control over the component behavior, shape it to Fluxon UI's aesthetic and fully integrate it with Phoenix and LiveView.

In the end it resulted in a fully accessible and simple to use component:

<.date_picker
  field={f[:birth_date]}
  label="Birth Date"
  placeholder="Select your birth date"
/>

Check out the Date Picker, Date Time Picker and Date Range Picker component pages for more examples and information.

Autocomplete Component

The Autocomplete is the brother of the existing Select component. Both offer the same goal of selecting a value from a list, but they differ in the way they are used and the UX they provide.

Like the component name suggests, the Autocomplete component is built on top of an input field that is used to filter the options. One of the big features of the component is that it supports server-side (LiveView) filtering, which means it's a good choice if you are dealing with a large number of options.

<.autocomplete
  field={f[:user_id]}
  label="Select User"
  placeholder="Search users..."
  options={@users}
  on_search="search_users"
/>

Check out the Autocomplete component page for more examples and information.

Documentation

Looking back, not having proper documentation from the start was one of my biggest mistakes with Fluxon UI. Today, I'm happy to announce that the documentation is now available at https://docs.fluxonui.com.

Documentation is an ongoing effort. I'll continue to add more examples, improve existing content, and expand the API reference as Fluxon UI evolves.

Adding "clearable" to select component

This release introduces a new clearable feature for the Select component. It provides a way to clear the selected options (single and multiple) and improves the overall user experience.

This feature can be enabled by adding the clearable attribute to the select component:

<.select
  field={f[:country]}
  placeholder="Select a country"
  label="Country"
  options={[{"Germany", "de"}, {"Japan", "jp"}, {"Australia", "au"}]}
  clearable
/>

The clearable feature includes the following behaviors:

• Clear Icon: A "x" icon is displayed when there are selected options - clicking it clears all selections in both single and multiple select modes
• Option Unselect: Single option selects can now be unselected by clicking the selected option
• Backspace Key: Pressing backspace when the select is focused will clear all selections, similarly to clicking the clear icon

When unselecting a single option, an empty option (<option value="">) is selected under the hood, sending an empty string in the form data. This behavior matches how multiple select handles empty states by sending the ([""]) array.

Additionally, keyboard navigation has been improved. When opening the select using keyboard navigation, it will now start from the selected option instead of defaulting to the first or last position. This makes navigation more intuitive, especially with long option lists.

Bug Fixes

• Fixed: Stacked dialogs (sheet and modal) no longer lose their z-index reference when receiving LiveView patches

Improved Modal and Sheet Components

This release focuses on improving modal and sheet components along with fixing Safari-specific issues, with particular attention to focus management and interaction smoothness.

Key improvements in this release:

• Enhanced: Modal and sheet components now handle content overflow more gracefully with automatic scrolling, preventing screen overflow issues
• Enhanced: Opening modals and sheets no longer causes page shifting, regardless of the gutter stable setting
• Enhanced: Select component now shows a clear outline when focused or active, improving accessibility
• Enhanced: Focus management in modals and sheets now prioritizes elements with autofocus attributes
• Fixed: Date and time input fields now render correctly in Safari browsers
• Fixed: Focus trap behavior when modals or sheets contain no focusable elements

Check out the modal docs → and sheet docs → for more details about these components.

Checkbox and Radio Card Variants

This release introduces card variants for Checkbox and Radio components, providing an alternative layout for selection controls. These variants maintain the same component API as their standard counterparts while offering enhanced visual presentation.

To use the card variant, simply add the variant="card" attribute to any of the following components:

<.checkbox variant="card">
<.checkbox_group variant="card">
<.radio_group variant="card">

By default, the card variants hide their input controls for a cleaner appearance. You can display these controls by setting the control attribute to either "left" or "right", determining their position within the card.

The card variants support custom content through their respective slots (<:checkbox> and <:radio>), enabling various layout and styling possibilities. Here are two examples demonstrating custom implementations:

The same customization options are available for radio buttons:

I've also added a new comprehensive form layout example that showcases these new card variants in action: Job Application form example →

Also, check the checkbox docs → and the radio docs → for more details.

Enhanced Select Component

The Select component is one of the most sophisticated components in the Fluxon UI library. Based on valuable user feedback, this release brings several meaningful improvements and fixes to enhance its functionality.

Here are the key updates to the Select component:

• Enhanced: Better handling of large option lists - the dropdown now automatically adjusts its height to fit the screen
• Enhanced: Search box remains fixed at the top while options scroll beneath it, improving search usability
• Enhanced: Smarter positioning - the dropdown now compresses up to 150px height when space is limited, rather than flipping to the top (see video below)
• Fixed: Error message now displays with consistent styling across form components
• Fixed: The value attribute now works correctly in combination with the field attribute
• Fixed: Selected values properly reset when options are updated
• Fixed: Outline styling in the native variant aligns with the design system

The video below demonstrates the improved select positioning when screen space is limited:

Additional improvements in this release include:

• Improved alignment between error messages and their icons
• Enhanced focus-trap behavior for nested dialogs
• Added a new hide_close_button option for both modal and sheet components

Popover

The Popover component is now available as part of our overlay components collection. It builds on the same principles as the Dropdown but serves a different purpose - while Dropdowns are specialized for navigation menus, Popovers expects any type of content.

Built with the same attention to detail as other Fluxon components, it includes automatic positioning, smooth transitions, and keyboard navigation.