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 is not available via CDN for now because Tailwind CSS requires access to the JavaScript files to generate the necessary utility classes. By specifying the correct file path in the content array, Tailwind can scan the provided files from FlyonUI to create the needed styles:

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"

Step 2: 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.