FlyonUI

FlyonUI is a Tailwind CSS component library that combines semantic styling with interactive headless JavaScript functionality. It is built upon three core pillars:

1. Tailwind CSS: Provides the utility-first foundation.
2. daisyUI: Provides semantic class names to make Tailwind code more readable and maintainable.
3. Preline: Provides the headless, unstyled, and accessible JavaScript plugins that handle interactivity (e.g., Accordion, Dropdown, Overlay).

This architecture allows developers to use clean, semantic classes for styling while benefiting from robust, accessible JavaScript behaviors without writing custom logic for common UI patterns.

To enable interactive components such as accordions, dropdowns, and modals, include the FlyonUI JavaScript in your HTML file just before the closing </body> tag.

To include the full library:

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

To include only a specific component (e.g., accordion) for better performance:

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

To use FlyonUI, ensure you have Node.js and Tailwind CSS installed. Follow these steps to integrate FlyonUI into your project:

1. Install the package as a dependency:

   npm install flyonui

2. Add FlyonUI as a plugin in your CSS entry point (e.g., app.css).

3. To enable interactive JavaScript components (like accordions, dropdowns, or modals), you must also include the FlyonUI JavaScript files in your HTML.

You can configure HSTabs directly in your HTML using the data-tabs attribute. The attribute accepts a JSON string of ITabsOptions.

Example:

<div role="tablist" data-tabs='{"eventType": "hover"}'>
  <button data-tab="tab-1">Tab 1</button>
  <button data-tab="tab-2">Tab 2</button>
</div>

<div data-tab="tab-1">Content 1</div>
<div data-tab="tab-2" class="hidden">Content 2</div>

Additionally, you can link a <select> element to act as a tab switcher using the data-tab-select attribute on the container, pointing to the ID of the select element.

HSOverlay integrates with HSAccessibilityObserver to manage focus and keyboard interactions:

1. Focus Management: When an overlay opens, focus is moved to the overlay container or the first element with the [autofocus] attribute. When closed, focus is restored to the element that originally triggered the overlay.
2. Keyboard Navigation:
   • The Esc key closes the overlay (if hasAbilityToCloseOnBackdropClick is true).
   • Tab key trapping: If --tab-accessibility-limited is set to true, focus is trapped within the overlay's focusable elements.
3. ARIA Attributes: The plugin automatically manages aria-expanded on toggle buttons and aria-overlay on the overlay element itself.

Add FlyonUI to your Tailwind CSS configuration by importing it in your CSS file.

If you want to use FlyonUI's interactive JavaScript components, you must also import the variants CSS and define the source path for the JS files so Tailwind can scan them. You can also target specific components to reduce bundle size.

@import "tailwindcss";
@plugin "flyonui";
@import "./node_modules/flyonui/variants.css"; // Require only if you want to use FlyonUI JS components

@source "./node_modules/flyonui/dist/index.js"; // Require only if you want to use FlyonUI JS components

Scrollspy uses specific attributes to manage offsets and the scrollable container:

• data-scrollspy-scrollable-parent: Set this on the scrollspy element to specify the ID of the element that is actually scrolling (e.g., a div with overflow: auto). If not provided, it defaults to the document.
• --scrollspy-offset: A CSS property that can be set on the scrollspy element (global offset) or on individual sections (local offset) to adjust when a section is considered 'active'.

The Pin Input component manages a group of individual input fields (typically for OTP or PIN codes). It can be initialized automatically via HSPinInput.autoInit() if your HTML elements use the data-pin-input attribute, or manually by instantiating the HSPinInput class.

To use the component, your HTML structure must include a container with the data-pin-input attribute and multiple child elements with the data-pin-input-item attribute.

Automatic Initialization

Call HSPinInput.autoInit() to find all elements with data-pin-input (that do not have the --prevent-on-load-init class) and initialize them.

Manual Initialization

Pass the container element and an optional configuration object to the constructor.

const pinInput = new HSPinInput(element, { availableCharsRE: '^[0-9]+$' });