Updates

Changelog

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

Pro Changelog

08 October, 2025
v2.5.0
Introducing Free Admin Dashboard
FlyonUI v2.5.0 is here, featuring Free Admin Dashboard built with FlyonUI components and Tailwind CSS.
Added
- New Admin Dashboard Template:
  Free Dashboard(9 pages)
26 September, 2025
v2.4.1
Fixes and Improvements.
FlyonUI v2.4.1 is here, with new features, fixes, and improvements.
Added
- Dropdown: Introduced --mega-menu:{boolean} to ensure the Mega Menu remains fully visible on small screens without getting clipped.
- Advanced Select: Added support for Option disabled state. [FeatureReq #111]
- Tooltip: Reintroduced --interaction for Popover interaction. [PR #117]
Fixes and Improvements
- Dropdown:
  Fixed issue where the input element in the dropdown couldn't receive focus or allow typing. [PR #118]
  Resolved placement issue. [PR #114]
  Fixed non-functioning OnEnter behavior.
- Overlay: Fixed issue with data-overlay-keyboard="false" [PR #116] .
- Combo Box: Fixed keyboard interaction for Arrow , Home , and End keys.
06 August, 2025
v2.4.0
New Preline Components, Fixes and Improvements.
FlyonUI v2.4.0 is here, featuring new Preline components example along with essential fixes and improvements.
Added
- New Preline Components:
  Sidebar: Collapsible sidebar
  Sidebar: Collapsible with mini sidebar
  Dropdown: Scope Window
Updates
- Updated: Preline to v3.2.0
Fixes and Improvements
- Improvements: Introduced a centralized Accessibility Management system with full keyboard navigation and interaction support across all UI components.
- Themes: Refined --color-neutral in the Corporate theme for better consistency.
- Popover: Removed the --interaction class option and focus example.
- Menu: Fixed hover issue with dropdown-active when used in menus.
17 July, 2025
v2.3.1
Fixes and Improvements
FlyonUI v2.3.1 includes minor bug fixes.
Updates
- Modal & Drawer: Adjusted shadow color for improved visual consistency.
15 July, 2025
v2.3.0
Theme Additions, AI Integration & Stability Improvements
FlyonUI v2.3.0 brings new themes, enhanced AI Editor support with Copy Prompt, and improved MCP setup, along with multiple bug fixes to ensure better visual consistency and overall stability across UI components.
Added
- AI and MCP Setup:
  Included guidelines for setting up the Context7 MCP server for FlyonUI. For details, refer to the AI and MCP Setup documentation.
  Integrated the Copy Prompt functionality into the documentation to streamline the process of copying code snippets, enabling faster implementation with AI Editor.
- New Themes:
  Claude
  Pastel
  Perplexity
  Spotify
  Vs Code
- Skeleton Component:
  Introduced a new skeleton-striped variant.
Updates
- Updated: Preline to v3.1.0
- Switch: Border-radius now uses var(--radius-selector) for enhanced consistency.
- Radial Progress: Circular background color has been refined.
- gradient-bg: Added a configurable gradient angle variable.
Fixes and Improvements
- Class Specificity: Addressed specificity conflicts in Avatar, Breadcrumb, Drawer, Pin Input, and Stat components.
- Avatar: CSS now supports usage with <span> elements for button integrations.
- Modals: Resolved animation delay issue when closing modals.
- Indicator: Corrected typo error in class naming.
- Dropdown: Removed unnecessary hover effect from active states.
- Menu: Improved compatibility between menu styles and accordion behavior.
21 May, 2025
v2.2.0
Fixes and Improvements
FlyonUI v2.2.0 is here! bringing a range of fixes and overall enhancements.
Updates
- Updated: Preline v3.0.1
Fixes and Improvements
- Themes: Updated the radius-selector variable for the Valorant theme and --color-accent variable color in Black theme.
- Switch: Updated default switch color
- FlatPickr: Fixed styling for the range date picker.
- Form Element: Adjusted the opacity of disabled states to 50%.
- Badge: Fine-tuned horizontal padding across all badge sizes.
- Select: Added hover state for better interactivity.
- Accordion: Reduced shadow depth to sm for a cleaner look.
- Carousel: Updated navigation button styles for improved usability.
- Footer: Resolved specificity issue with the `footer-title` class.
- Fixed: Keep selected value when building options of HSSelect [PR #93]
- Updated the package.json configuration by setting "type" to module .
- Renamed the files from "webpack.config.js" to "webpack.config.cjs", "webpack.config.mjs.js" to "webpack.config.mjs.cjs" and "dts-config.js" to "dts-config.cjs" to accommodate "type": "module", .
07 April, 2025
v2.1.0
New Ghibli theme and framework guide for 11ty
FlyonUI v2.1.0 is here, with new trending Ghibli theme and framework guide for 11ty.
New Theme
- Ghibli
New Framework Guide
- Added framework guide for 11ty
Fixes and Improvements
- Fixed: Floating textarea placeholder and label positioning issue when using both trailing and leading icons. [PR #83]
- Improves neutral-content color in light theme and neutral color in luxury theme.
31 March, 2025
v2.0.1
Updated framework integration guide.
FlyonUI v2.0.1 is here, with updated framework integration guides and some basic fixes.
New in Components
- Card: Introduced card-alert class to style alert messages inside a card with rounded corners.
Updated
- Framework Guides: The framework integration documentation has been updated for all frameworks.
Fixes and Improvements
- Dropdown: Removed unused label class.
- Tabs: Resolved the tab-lifted warning during the build process.
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 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.