Updates

Changelog

See what's new added, changed, fixed, improved or updated.

24 March, 2025
v2.0.0
Seamless Integration with Tailwind v4, New Components, Fresh Themes and more.
FlyonUI v2.0.0 now fully compatible with tailwind v4, new components, new themes, some basic fixes and improvements.
- For a detailed overview of the changes, please refer to the Upgrade Guide .
New DaisyUI Components
- Filter
- Status
New Themes
- Black
- Mintlify
- Shadcn
- Slack
- Valorant
New in Components
- Accordion:
  Added new option [--keep-one-open:*] .
  Added new events on:beforeOpen and on:beforeClose .
- Advance Select:
  Added new option :minSearchLength and example for it .
- Alert:
  Dashed Alerts
  Responsive Alert
  Added variable structure, creating custom alert became easy.
- Apex chart:
  Candle Stick Chart
- Badge:
  Dashed Badges
  New badge sizes: badge-md (default) and badge-xl for more badge variety.
  Added variable structure, creating custom badge became easy.
- Button:
  New button sizes: btn-md (default) and btn-xl for more button variety.
  Added variable structure, creating custom button became easy.
- Card:
  New card-border style that adapts the border width from the theme.
  New card sizes: card-xs , card-sm , card-md (default), card-lg and card-xl
- Checkbox:
  New checkbox sizes: checkbox-md (default) and checkbox-xl
  Improved the checkmark icon and its animation.
- Dropdown:
  Added new options [--scope:*] [--has-autofocus:*] and [--gpu-acceleration:*] .
- File Input:
  New file input sizes: file-input-md (default) and file-input-xl
  Adjusted padding and font size for a more polished look.
- Input:
  New input sizes: input-md (default) and input-xl
  Added helper-text for additional guidance on inputs.
- Loading:
  New sizes loading-md (default) and loading-xl .
- Menu:
  New sizes menu-md (default) and menu-xl .
- Modal:
  Added modal-dialog-md as a default modal size.
  Added new options [--auto-close-equality-type:*] and [--has-dynamic-z-index:*] .
- Pin Input:
  Added pin-input-xs , pin-input-md (default) and pin-input-xl .
- Progress:
  Added progress-horizontal for direction.
- Radio:
  New sizes radio-md (default) and radio-xl .
- Range:
  Added range-xl class for range size.
- Select:
  Select Group
  New select sizes: select-md (default) and select-xl for more select variety.
  Added new options data-tabs and :eventType
- Stack:
  Added support for stack directions stack-start and stack-end .
- Stat:
  Added stats-border for bordered variant of stat and stats-horizontal or default direction.
- Switch:
  New sizes switch-md (default) and switch-xl .
- Table:
  Added table-xl class for table size.
- Tabs:
  New sizes tab-md (default) and tab-xl .
- Textarea:
  Textarea Group
  New textarea sizes: textarea-xs , textarea-sm , textarea-md (default), textarea-lg and textarea-xl for more textarea variety.
Added
- New classes:
  Introduce new gradient-bg class for gradient background with semantic class support like gradient-bg-primary etc.
- Animation:
  Use tailwindcss-intersect plugin for scroll-triggered animations.
Breaking Changes
- The installation steps for third-party components have been updated.
- Avatar:
  Renamed placeholder class to avatar-placeholder , online-top class to avatar-online-top , placeholder class to avatar-placeholder , online-bottom class to avatar-online-bottom , away-top class to avatar-away-top , away-bottom class to avatar-away-bottom , busy-top class to avatar-busy-top , busy-bottom class to avatar-busy-bottom offline-top class to avatar-offline-top and offline-bottom class to avatar-offline-bottom .
- Dropdown:
  Renamed active class to dropdown-active and disabled class to dropdown-disabled .
- Input:
  Removed input-group . Grouping can now be achieved by wrapping inputs with the input class.
- Input Number:
  Structure impacted due to the removal of the input-group .
- Menu:
  Renamed disabled class to menu-disabled , active class to menu-active and focus class to menu-focus .
- Phone:
  Renamed camera class to mockup-phone-camera and display class to mockup-phone-display .
  Removed the use of artboard in phone components.
- Range:
  Rename variable name to --range-color from --range-shdw .
- Stack:
  Instead of setting the width and height of the stack items, use width and height for the stack itself.
- Table:
  Renamed hover class to row-hover and active class to row-active .
- Toggle Password:
  Structure impacted due to the removal of the input-group .
Removed
- The classes vertical-scrollbar , horizontal-scrollbar , and rounded-scrollbar has been removed.
- Alert:
  Removed alert-neutral color.
- Artboard:
  Removed all artboard-* and phone-* classes. These classes only set the width and height of the div, and now we recommend using Tailwind CSS w-* and h-* classes for better control and flexibility.
- Badge:
  Removed badge-neutral color.
- Button:
  Removed btn-neutral color.
- Card:
  Removed card-compact instead use card-sm or any other card sizes.
- Drawer:
  Removed drawer-close class.
- Dropdown:
  Removed [--skidding:*] option.
- Input:
  Removed input-group , input-group-filled , input-group-text , input-floating-label , input-filled-label , input-filled-focused , label-text-alt , and input-filled variant.
- Progress:
  Removed progress-neutral color.
- Radio:
  The radio-inset-{size} and radio-inset-{semantic-color} classes have been removed. Now, radio-inset is used as a style class instead of a component class.
- Select:
  Removed select-filled variant.
- Textarea:
  Removed textarea-filled variant.
- Timeline:
  Removed timeline-trimmed class.
Updated
- Updated: Tailwind v4.0.0
- Updated: DaisyUI v5.0.0
- Updated: Preline v3.0.0
- Updated:
  Updated how to use semantic colors in JS files from 'oklch(var(--bc) / 0.4)' to 'color-mix(in oklab, var(--color-base-content) 40%, transparent)' .
- Alert:
  The neutral alert is now the default.
- Badge:
  The neutral badge is now the default.
  Adjusted the badge sizes based on a new scale for better visual consistency.
- Button:
  The neutral button is now the default.
  Button sizes have been adjusted to fit the new design scale.
- Checkbox:
  Adjusted the size scale to better align with other components.
- Dropdown:
  Floating UI has now completely replaced Popper.js across all plugins
- File input:
  Adjusted padding and font size for a more polished look.
- Input:
  Updated input-floating structure
  Adjusted size scale for better uniformity across components.
- Keyboard:
  Adjusted kbd height for all sizes.
- Link:
  Update font-weight:500 as default.
- Modal:
  Updated backdrop color to base-300/60 .
- Radio:
  Adjusted the size scale to better align with other components.
- Range:
  Adjusted the size scale to better align with other components.
- Select:
  Updated select-floating structure
  Adjusted size scale for better uniformity across components.
- Sidebar:
  The structure for collapsible menu/sidebar has been updated.
- Textarea:
  Updated textarea-floating structure
  Adjusted the size scale to better align with other components.
- Tooltip/Popover:
  Floating UI has now completely replaced Popper.js across all plugins.
Fixes and Improvements
- Advance Select:
  Fixed advanced-select search bar background not correct with themes. #Issues/57
- Diff:
  Fixed Firefox lag issue.
- Drawer:
  Fixed edge cuts off in the narrow devices. #Issues/38
- Input:
  Fixed floating input label width problem. #Issues/56
- Loading:
  Fixed a bug where Safari sometimes froze the animation.
- Menu:
  Fixed Menu title will have an active effect by click when it is not plain text. #Issues/54
- Table:
  Fixed table border bottom issue with single row. #Issues/60
03 January, 2025
v1.3.0
New Preline Components, Fixes, and Improvements.
FlyonUI v1.3.0 is here, featuring new Preline components example along with essential fixes and improvements.
New Preline Components
- Combobox: Minimum search length
- Datatables: Multiple Controls
Updates
- Updated: Preline v2.7.0
- Updated: Divider component border-color from base-content/10 to base-content/20
- Updated: Heading color from text-base-content/90 to text-base-content
- Updated: You can now invoke overlay methods directly on the overlay itself without linking it to any button. The previous functionality is retained for backward compatibility.
Fixes and Improvements
- Added: A new parameter optionAllowEmptyOption has been added for the Advanced Select
- Added: A new parameter minSearchLength has been added for the Combo Box
- Added: Enhanced support for multiple prev and next elements, each with its own event listeners, ensuring proper initialization and cleanup in the destroy method. Improved event listener management for search and pagination controls to prevent memory leaks and support dynamic elements.
- Fixed: Removed flyonui.mjs as it was creating issues while using import
- Fixed: Improve card style specificity
- Fixed: Typo in select and textarea [PR #30]
- Fixed: Improved label styles for better usability in form elements
- Fixed: setValue method functionality with tags in Advanced Select
11 December, 2024
v1.2.0
New Preline components: Advanced Range Slider, Drag-and-Drop & Tree View plugins and more
FlyonUI v1.2.0 is here! This update brings Preline plugins, components, pages, updates, fixes, and improvements.
New Preline Plugins
- Plugins: Tree View
- Plugins: Advance Range Slider
- Plugins: Datatables
New Preline Components
- Third-Party Plugins: Advance Range Slider
- Third-Party Plugins: Drag and Drop (Sortable.js)
- Third-Party Plugins: Animation
- Third-Party Plugins: Datatables
- Navigations: Sidebar
- Overlays: Context Menu
- Tree View:
  Multiple selection
  Draggable
  Draggable and auto collapse one level group
  Checkbox based
- Carousel:
  Multiple slides
  Centered
  Draggable
  Snap point
  Auto Height
  Current state info
  Thumbnails (horizontal)
  Thumbnails (vertical)
  isRTL
- Drawer:
  Scoped Based drawer
- Advance Select:
  Fixed position
  Static search limit
  Direct match searching Off
  Generate select according to the remote data (single)
  Multiple (remote data)
  Tags (remote data)
  Option template (remote data)
  Conditional counter (remote data)
  Custom template with avatars (remote data)
  Modal example with overflow:hidden;
- Combox:
  Json example (based on API pathes)
- Helpers:
  ApexChart helper
  Clipboard helper
- New Variant in plugins : Destroy and Reinitialize
New Pages
- New Page: Theme Generator
Updates
- Updated: Preline V2.6.0
- Updated: Button outlined variant #Issues/20
- Updated: File upload disable state styling #Issues/22
- Updated: menu-item active state styling #Issues/26
- Updated: Timeline style
- Updated: stat-value font-size in stat component
- Updated: Style for default range slider
- Updated: The class options in Clipboard have been updated for consistency with Preline: copy-clipboard is now js-clipboard , copy-clipboard-default is now js-clipboard-default , copy-clipboard-success is now js-clipboard-success , and copy-clipboard-success-text is now js-clipboard-success-text .
Fixes and Improvements
- Added: global.d.ts for more convenient work with types.
- Added: plugin.ts, the typed version of plugin.js.
- Added: mjs versions of plugins.
- Fixed: Update theme link in src/index.js
- Fixed: Fixed disabled button make it pointer event none
- Fixed: In the smaller screen Dropdown inside collapse had a closing issue
- Fixed: Fixed hamburger transition issue in navbar #Issues/18
- Fixed: Fixed the code structure for form elements #Issues/15
09 October, 2024
v1.1.0
New wave plugin and more.
FlyonUI v1.1.0 is here, with new wave plugin and some basic fixes and improvements.
New Components
- Third-Party Plugin: Wave Effect
Fixes and Improvements
- Fixed: Fixed class specificity in card.
- Fixed: Corrected spelling errors for the stripped class in the table and progress sections.
- Fixed: Add IAddVariantOptions type to the carousel "dragging" class.
- Fixed: Fixed a typo in the documentation: changed “sematic” to “semantic”. #Issues/6
23 September, 2024
v1.0.0
Initial release
FlyonUI is a open source, modern, responsive and accessible design system that helps you build fast, beautiful and accessible websites.