Quick Start

FlyonUI brings together the beauty of semantic classes and the interactive headless JavaScript plugins, offering you a powerful toolkit to build stunning, interactive user interfaces with ease.

This guide will walk you through getting started with FlyonUI. You’ll learn how to set it up, customize it, keep it updated, and integrate it into your project!

Make sure that you have Node.js and Tailwind CSS installed.

• 1
  Install FlyonUI

  To start, add FlyonUI as a dependency to your project by running the following command:

  npm install flyonui

  This will install FlyonUI and make it available for use in your project.

  ---

• 2
  Add flyonui to app.css:

  Next, configure main CSS to use FlyonUI.

  @import "tailwindcss";
  @plugin "flyonui";
  @import "./node_modules/flyonui/variants.css"; /* Require only if you want to use FlyonUI JS component */
  
  /* If you gitignored node_modules use below method */
  @source "./node_modules/flyonui/dist/index.js"; /* Require only if you want to use FlyonUI JS component */

  This ensures that FlyonUI's styling is applied correctly throughout your project.

  If you want to include specific js component:

  @source "./node_modules/flyonui/dist/accordion.js"; 

  ---

• 3
  Include FlyonUI JavaScript in HTML for JS components

  For enabling interactive components such as accordion, dropdown, modal etc... , include FlyonUI's JavaScript in your HTML file, just before the closing </body> tag:

  <script src="../node_modules/flyonui/flyonui.js"></script>

  For a single component, use the specific path:

  <script src="../node_modules/flyonui/dist/accordion.js"></script> 

FlyonUI utilizes Tabler icons, which are available through Iconify.

For detailed installation instructions, refer to the official documentation, or follow the steps below to set it up.

You can refer Icons page for more info

1. Install the plugin
   Begin by adding @iconify/tailwind4 as a dev dependency:

   npm i -D @iconify/tailwind4

2. Add Tabler icons
   Install the Tabler icon set by running:

   npm i -D @iconify-json/tabler

3. Basic Usage
   To include the icons, add the following line to your CSS file:

   @plugin "@iconify/tailwind4";

   Then, to use an icon in your HTML, add a dynamic class selector for the desired icon. For example:

   <span class="icon-[tabler--upload]"></span>

FlyonUI does not provide CDN support due to the way its styles and components are dynamically generated and integrated with JavaScript. The FlyonUI library relies on generating the required styles based on the specific javascript components being used, which makes it challenging to deliver a static version via CDN for development environments. This dynamic nature means that during development, FlyonUI needs to have access to the tools that generate these styles on-demand, making CDN integration complex and impractical in most cases.

Additionally, while CDNs are commonly used to host static resources like CSS and JS files, FlyonUI’s requirement for dynamic style generation tailored to JavaScript-driven components limits this approach. We suggests that users can still use CDNs for production environments where the generated styles are finalized and static, but not during development .

To import a single CSS component from a library, you can utilize the include configuration property. This allows you to selectively load only the components you need, reducing unnecessary styles and optimizing your project.

@plugin "flyonui" {
  include: badge, dropdown, timeline;
}

To use a single JS component, let’s walk through the steps. In this example, we’ll focus on the accordion component.

Please note that not all JavaScript components have variants. You can refer to the class table in the documentation to check if a component offers variant options.

Step 1: Import the JavaScript for the component

To enable the interactive accordion component, include the FlyonUI JavaScript file for the accordion just before the closing </body> tag. This file contains all the necessary JavaScript for accordion.

<script src="../node_modules/flyonui/dist/accordion.js"></script>

Step 2: Update main.css

Add variants css for accordion and accordion.css.

@plugin "flyonui" {
  include: accordion;
}
@import "./node_modules/flyonui/src/js/plugins/accordion/variants.css"

// If you gitignored node_modules use below method 
@source "./node_modules/flyonui/dist/accordion.js";

To bundle FlyonUI into your project using a JavaScript bundler like Webpack or Parcel, follow these steps:

Step 1: Import FlyonUI JavaScript

In your main JavaScript file (e.g., app-bundle.js), import FlyonUI:

import "flyonui/flyonui"

Step 2: Include the JavaScript in HTML

For a single component, import the specific component:

import "flyonui/dist/accordion"

Step 3: Include the JavaScript in HTML

Finally, ensure your bundled JavaScript file is included in your HTML:

<script src="../path-to/flyonui.js"></script>

For more details on FlyonUI's JavaScript capabilities, check out the a JavaScript documentation .