Config

How to change the default configuration of FlyonUI? FlyonUI can be configured from your tailwind.config.js file. Default config:

module.exports = {
  //...

  // Add FlyonUI plugin
  plugins: [require("flyonui")],

  // FlyonUI config (optional - here are the default values)
  flyonui: {
    themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "soft"]
    darkTheme: "dark", // name of one of the included themes for dark mode
    base: true, // applies background color and foreground color for root element by default
    styled: true, // include FlyonUI colors and design decisions for all components
    utils: true, // adds responsive and modifier utility classes
    vendors: false, // default is false when true add customize css for apexChart, editor.js, flatpickr, fullcalendar, notyf, raty-js
    logs: true, // Shows info about FlyonUI version and used config in the console when building your CSS
    themeRoot: ":root" // The element that receives theme color CSS variables
  }

  //...
}

Boolean or array (default: false)

If it’s true, all themes will be included. If it’s false, only light and dark themes will be available. If it’s an array, only themes in the array will be included and the first theme will be the default theme. Read more about themes.

String (default: “dark”)

Allows you to set another theme for system auto dark mode. By default, the dark theme (or a custom theme named dark) will be used when the user is in dark mode. You can change this to any other theme.

Boolean (default: true)

If true, basic base styles will be added, including Tabler icons via iconify. To learn more, check the Icons page.

Boolean (default: true)

If true, components come pre-styled with FlyonUI colors and design. If false, components will have no visual styles, giving you full control to style them.

Boolean (default: true)

If true, responsive and utility classes are included.

Boolean (default: false)

If true, custom styles for third-party libraries like apexChart, editor.js, and fullcalendar are added.

Boolean (default: true)

If true, FlyonUI shows log details in the console while building CSS.

String (default: “:root”)

Specifies the element to apply theme CSS variables. For example, you can set this to * if embedding FlyonUI in a shadow root so all components can access the required variables.