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
  Step 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
  Step 2: Configure Tailwind

  Next, configure Tailwind CSS to use FlyonUI. Open your tailwind.config.js file and add FlyonUI as a plugin:

  module.exports = { 
    content: ["./node_modules/flyonui/dist/js/*.js"], // Require only if you want to use FlyonUI JS component
  
    plugins: [
      require("flyonui"),
      require("flyonui/plugin") // 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:

  module.exports = {
    content: ["./node_modules/flyonui/dist/js/accordion.js"],
  }

  ---

• 3
  Step 3: Include FlyonUI JavaScript in HTML

  To enable interactive elements, include FlyonUI's JavaScript in your HTML file, right 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/js/accordion.js"></script> 

  This script ensures that all FlyonUI interactivity is correctly applied to your elements.

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 .

If you’re utilizing FlyonUI CSS components like buttons, cards, form elements, stats, etc. you can easily include FlyonUI in your tailwind.config.js file. This enables you to access FlyonUI CSS, making it simple to integrate the desired components seamlessly into your project.

module.exports = {
  plugins: [
    require("flyonui"),
  ]
}

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

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/js/accordion.js"></script>

Step 2: Update Tailwind config for JavaScript component

Add the path for the accordion component in your tailwind.config.js. This will generate the classes required for accordion.

module.exports = {
  content: ["./node_modules/flyonui/dist/js/accordion.js"], // Include only the specific component's JS
  plugins: [
    require("flyonui"),
    require("flyonui/plugin") // Required when using FlyonUI JS components
  ]
}

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/js/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 .